Why doesn't HTML and BODY take all available height of document when min-height: 100%? [duplicate]

Answer 1

I've misread the question at first, but on second thought I'd interpret it as:

The html element ignores min-height: 100%.

Why is that?

The answer to "Why" is in the relevant spec, emphasis mine:

min-height

...

Value: <length> | <percentage> | inherit

...

<percentage>
Specifies a percentage for determining the used value. 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 percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

This is why you need to set a height for the html element for min-height to work on the body element. Alternatively you can position the html element absolutely, like this:

html { border: 10px solid black }
body { border: 10px dashed red }

html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }    
/* alternatively: html { min-height: 100%; height: 100%; } */    

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

See the position: absolute demo or the height: 100% demo.

Thanks to @Alohci for correcting me on the interpretation of the spec.

Answer 2

In the case you describe, html and body do take up 100% of the screen height. Add a background-color to see this:

body {
    background-color: lightblue;
}

You'll see the entire screen is now coloured. The jquery statement you're getting .height() from is still only returning the height of the content, not being stretched to the height of the screen. When you have a scrollbar, .height() of body will return the height of all the content, not just the visible area. You can get the height of the window with $(window).height(). See this fiddle for a demo.