According to this website
https://www.w3schools.com/html/html_blocks.asp
a div is a block element and "a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)."
Then why does this code not color the upper part of the page red?:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;float: left; height: 20%;"></div>
</body>
</html>
When I add "width = 100%" to the style of the div, I get what I expect without that variable. Why doesn't it stretch out by itself?
A floated empty div has no height or width.
You've given it a height, but it still has zero width. Only when it also has a width (or some content) will you see it.
The default block behaviour you've referenced doesn't apply to a floated element.
Because you have float: left in there (which only takes the width of its content and wouldn't make any sense for 100% width anyway) - just remove it:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;height: 20%;"></div>
</body>
</html>
In order to stretch out the floated div element, the styling for its width must be explicitly stated. If you neglect to specify it, then the browser only stretches it as much as it needs. So, either adding width="100%"to the DIV tag or adding width:100% to the its styling are options so that the floated div occupies the full width, even if it lacks content.
The source that the OP cites applies to an "unfloated" div element. But, a div that is floated, as is the case in the OP's CSS code, does not follow the usual rules per MDN:
...the element is taken from the normal flow of the web page, though
still remaining a part of the flow ...
In this particular case, since the OP indicates that the floated div should stretch out completely, it seems superfluous to have the div float left; that float property should probably be deleted unless the OP expects the width to dynamically change at some point.
Another way to stretch out the div element is to add this CSS to its styling: display:flex which creates a flex box.
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
div {
background: red;
height: 20%;
display:flex;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Note: while I removed the float property for the flex-box, you may leave it as it will have no effect on the flex-box.
Related
Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>
Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.
Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>
In this case you can use vh units for the screen height.
vh – Relative to 1% of the height of the viewport.
Your code will look like that:
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
As a result, the screen will be splitter in half horizontally.
In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.
html, body { height: 100% }
Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.
.t7 { width: 50vw; height: 100vh; ... }
I have a webpage where the background-color for the body fills the browser window when the content is short. At times the content may be large and fill the browser window. Is there any way of controlling the height of the body to fit the content? I have tried setting the height of the body to 100% and to auto but this does not help. Solutions that do not need Javascript are preferred. A minimal example is included:
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>Minimal Testcase for Body Height Sizing</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #f7fad4;
color: #262626;
}
</style>
</head>
<body>
<h1>Test Heading</h1>
<p>Sample text</p>
</body>
</html>
When I set the height of the body to auto, the height is correctly reported by the Chrome development tools, but the background-color overflows and fills the browser window. So the question becomes, how to prevent overflow of the background-color.
`
Set HTML background-color to white.
html{
background-color: white;
}
CSS body background is designed to fill the whole viewport if html doesn't have any style applied to it.
Try setting the height of the html element aswell
html {
height: 100%;
}
body {
min-height: 100%;
}
I have a question about the height of the body in the iframe .
body is a block-level element，so if I don't set the height and nothing in body,the height of body is 0;
Now, I find that, when body in iframe, it's height is always the same as iframe.(if iframe has it's own height)
for example:
a html file , iframe is empty, it's height is 500px.
body in the iframe is empty too, it's height is 500px too.
why body is empty but it's height is the same as iframe?
I see Quirks Mode in some blogs，but It will appear in html5 with <!DOCTYPE html>?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
iframe{
width:500px;
height:500px;
}
</style>
</head>
<body>
<iframe src="" frameborder="0"></iframe>
</body>
<script>
</script>
</html>
I has the same problem before, but I can answer to your question. The body inside the Iframe took the same height because it inheriting the parent height that means iframe height whatever we defined. For example,
<iframe width="100%" height="300px"></iframe>
So the height of the body inside of iframe would be "300px".
I want to have a <div> in my <body> that is 95% of the page's width and height. I want this <div> to be centered on all sides, such that a 2.5% margin exists on all sides of the <div>. The attached code almost works, but the top has no margin, such that the <div> extends all the way to the top of the page. I am using a reset. Can anyone offer some insight as to why this isn't working as intended?
The most important thing for me here is that I have no interest in working with non-relative measurements. I am coming from a background in Android development and believe that anything I make should scale to (almost) any screen size.
I would also like to say that I am just starting with HTML/CSS/JS and at this moment have no intention of supporting browsers that do not comply with the W3C standard (IE). Furthermore i would like to avoid anything that seems like a hack or a workaround.
The CSS Reset in case your interested: http://79.170.44.85/rasmussenprojects.com/reset.css
A hard copy since I can only post 1 link and it seems best to link to the reset:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body{
background-color:rgb(25,25,25);
height:100%;
width:100%;
}
.content-panel{
background-color:rgb(50,50,50);
width:95%;
height:95%;
margin:auto;
}
</style>
</head>
<body>
<div class="content-panel">
</div>
</body>
</html>
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
My take would be that you just give the body a padding: 2.5% (and don't forget position:relative).
The div then should just fill up all available space with position:absolute;top:0;right:0;bottom:0;left:0;
In general I also would work with box-sizing:border-box
I don't get it, why does the browser's vertical scroll-bars appear when running the following code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1>some text</h1>
</body>
</html>
Here is a live example - http://codepen.io/anon/pen/jlfCv
when I change the <h1> element to a <div> element, they disappear.
What am I missing? :-)
Thanks!
The h1 element has margin. Margins collapse when two elements are next to each other and form one margin taking the size of the largest value. In this case, you set the body's margin to zero but the h1 margin is still there. Since the h1 element is part of the body, it pushes against the top of the viewport which also pushes the body element down.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Just add this CSS rule:
h1 {
margin: 0;
}
Check this DEMO
The problems occured because the UA stylesheet add a margin to some elements (like the h1 element) by default.