Question

I found a way to make a div container to occupy at least full height of a page, by setting min-height: 100%;. However, when I add a nested div and set height: 100%;, it doesn’t stretch to container’s height. Is there a way to fix it?

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

This is a reported webkit (chrome/safari) bug, children of parents with min-height can’t inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can’t test in IE at the moment)

Possible workaround:

• add position:relative to #containment
• add position:absolute to #containment-shadow-left

The bug doesn’t show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I’m currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I’m not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box’s containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to ‘auto’.

If I put a min-height on my container, I’m not explicitly specifying its height – so my element should get an auto height. And that’s exactly what Webkit – and all other browsers – do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I’d give it a min-height of 100%. And – more importantly – if I set the child element to display:table-cell it will perfectly inherit the height of the container element – 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;
}

The markup:

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

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