Givin this html:\[code\]<body> <div id="a"></div> <div id="b"></div></body>\[/code\]I want to \[code\]#b\[/code\] fills all the remaining vertical space of its container block, i began with this:\[code\]body { height: 500px; width: 500px; overflow: hidden;}#a { height: 100px; width: 100px;}#b { height: 100%; width: 100%;}\[/code\]So \[code\]#b\[/code\] is 100% height, what means that is taking the height of its parent container block, that its \[code\]500px\[/code\], the problem is that the \[code\]overflow: hidden;\[/code\] seems to not work, \[code\]#b\[/code\] is not clipped.In the other hand, if i wrap \[code\]#a\[/code\] and \[code\]#b\[/code\] with another div with the same properties as \[code\]body\[/code\] above i have the desired result:\[code\]#wrap { height: 500px; width: 500px; overflow: hidden;}#a { height: 100px; width: 100px;}#b { height: 100%; width: 100%;}\[/code\]with this html of course:\[code\]<body><div id="wrap"><div id="a"></div><div id="b"></div></div></body>\[/code\]My question is why \[code\]div\[/code\] and \[code\]body\[/code\] 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?
Div and body, different behavior
- Thread starter icezero
- Start date