When the parent element sets min-height: 100%, the child element will not inherit the height.

Question

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;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Answer 1

Add height: 1px in the parent container. Works in Chrome, FF and Safari.

Answer 2

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:

• Add position:relative
in #containment
• Add position:absolute
in #containment-shadow-left

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-height and 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 not explicitly specifying its height - so my element should get an auto height. This is exactly what Webkit - and all other browsers - do.

Secondly, the solution I found:

If I set the container element to display:table and use height:inherit, it behaves like giving it a min-height of 100% Exactly the same. And - more importantly - if I set the child element to display: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:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.