I found a way to make a div container take up at least the full height of the page, by setting min-height: 100%;. However, when I add a nested div and set height: 100%;, it does not extend to the height of the container. Is there any way to fix this problem?
html, body { height: 100%; margin: 0; } #containment { min-height: 100%; background: pink; } #containment-shadow-left { height: 100%; background: aqua; } Hello World!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Add
height: 1pxin the parent container. Works in Chrome, FF and Safari.This is a reported webkit (chrome/safari) bug, child elements of a parent element with minimum height cannot inherit the height attribute:https://bugs.webkit.org/show_bug.cgi?id= 26559
Apparently Firefox is also affected (cannot test in IE at this time)
Possible solutions:
This bug will not show up when the inner element has absolute positioning.
Please seehttp://jsfiddle.net/xrebB/
Edited on April 10, 2014
Since I'm currently working on a project that really requires a parent container with
min-heightand child elements to inherit the container height, I did a little more research.First of all:I'm no longer sure if the current browser behavior is actually a bug. The CSS2.1 specification says:
If I set min-height on the container, I'm notexplicitlyspecifying its height - so my element should get an
autoheight. This is exactly what Webkit - and all other browsers - do.Secondly, the solution I found:
If I set the container element to
display:tableand useheight:inherit, it behaves like giving it amin-heightof 100% Exactly the same. And - more importantly - if I set the child element todisplay:table-cell, it will inherit the container element's height perfectly - whether it's 100% or more.Full CSS:
html, body { height: 100%; margin: 0; } #container { background: green; display: table; height: inherit; width: 100%; } #content { background: red; display: table-cell; }mark:
Seehttp://jsfiddle.net/xrebB/54/.