Nested 100% heights

Question

I'm working on a mobile site that has a structure that looks something like this:

body
---->Mobile container div (height 100%)
-------->Full page div (height 100%)
------------>Vertically centered div (height 200px)

My problem is that the full page div level comes out as 0px. Here's the relevant CSS:

html, body
{
    height: 100%;
    margin: 0;
}

.mobile
{
    min-height: 100%;
}

.full-page
{
    height: 100%;
    position: relative;
}

.center
{
    height: 200px;
    top: 50%;
    margin-top: -100px;
    position: absolute;
}

The mobile container is filling the window height, but the full page (100% of the height of the mobile container) is being rendered at 0px height, which ruins the vertical centering.

Why is this happening?

---

JSFiddle

• The red div is the mobile container
• The yellow div is the full page div (it's not visible because it's 0px tall)
• The green div is the vertically centered div

Answer 1

This is happening because of the following rule:

.mobile {
   min-height: 100%;
}

Here's why.

CSS specs tell us the following about percentage height:

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. A percentage height on the root element is relative to the initial containing block.

This applies to your .fullpage container. You can see that the parent container of .fullpage, which is .mobile, does not have a height set explicitly, but rather via the min-height property:

The min-height property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

You would think that the child container, .fullpage would take the min-height property into consideration when determining its height, but it does not. Browsers will not set the child element’s height (specified in percent) based on its parent’s computed height if only min-height is used.

To correct this, you could add height: 100% to:

.mobile {
   min-height: 100%;
}