Menu
Given this html:
<body>
<div id="a"></div>
<div id="b"></div>
</body>
I want #b to fill all the remaining vertical space of its container block, I began with this:
body {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
So #b is 100% height, which means that it is taking the height of its parent container block, which is 500px, the problem is that the overflow: hidden; seems to not work, #b is not clipped.
On the other hand, if I wrap #a and #b with another div with the same properties as body above I have the desired result:
#wrap {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
with this html of course:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
My question is why div and body seems to have different behaviors with the same properties? and is there any way to get the same effect without the wrapper?
To illustrate the question I have created two jsFiddles:
jsFiddle with body tag as wrapper: http://jsfiddle.net/3AMtG/
jsFiddle with div tag as wrapper: http://jsfiddle.net/2QWn3/
Two jsFiddles with the same properties yield different results. Why is that?
282
The overflow property has certain special behaviors specific to HTML's html and body elements, which are described in the CSS2.1 spec. These special cases are in place to accommodate changing overflow settings on the entire page in normal circumstances so authors simply need to set it on either html or body, but not both.
In this case, when you apply overflow: hidden to body, it actually affects the viewport instead of body (you can see this by resizing the preview pane to make it shorter — no scrollbars will appear on the preview pane itself). This causes #b to overflow the body normally even though you give it a fixed height that's less than the sum of #a and #b. In other words, it's as though you never set it on the body in the first place.
If you set overflow to something other than visible on html, though, this causes the viewport to use the value given to html instead of body, thereby leaving the declaration on body unaffected and allowing it to behave the same way as the wrapper:
html {
overflow: auto;
}
body {
height: 500px;
width: 500px;
overflow: hidden;
}
jsFiddle preview
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
