Why does 100% not mean 100% height?

Question

I am trying to get some divss to expand to fill the screen, but I am struggling. I have broken down the issue on this jsfiddle.

What I really want to kn

Answer 1

You need to also set the height of the html so that 100% refers to the viewport height instead of the document height (demo):

html,body {
    height: 100%;
    background: red;
    padding: 0;
}
div {
    height: 100%;
    background: grey;
}

Answer 2

There are two issues, you'll want to specify the height of the html as well, as in:

html, body {
    min-height: 100%;
}

Also there appears to be an issue in IE where min-height doesn't do the trick for the div but specifying height on the div does the trick. As such:

html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}

Answer 3

The issue is covered in the CSS 2.1 spec:

<percentage>

Specifies a 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. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

So, to clarify, a percentage height will reference the height of its containing block (unless it is position: absolute or position: fixed). If that containing block does not have a specified height, then the percentage will refer to auto, and it won't really do much.

position: absolute changes the referenced containing block to the nearest positioned (absolute, relative, or fixed) element.

position: fixed changes the referenced containing block to the viewport.

So, if you specify a height on your containing block, specify a position other than static on your containing block, or don't mind using the viewport as your containing block, then you can use percentage heights effectively.

Please see my demonstration at jsFiddle

Answer 4

This will work

   body, html {
      height: 100vh;
    }

    aside {
      background: green;
      width: 200px;
      height: 100vh;
    }

Answer 5

because you can't really use 100% height on a static element. Changing the position attribute from static to absolute will give you 100% height. demo

_{posted as answer per the request of the the PO.}

Answer 6

Percentage heights in CSS don't make a lot of sense to me. I would argue that it doesn't work the way it should, but CSS enthusiasts would insist that it does.

This article discusses both the issue and solution in detail:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

This might help too:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id="outer"> 
    <div id="inner"></div> 
    text 
</div> 

See here for more details on the above:
How to make a floated div 100% height of its parent?