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?
See Question&Answers more detail:os
