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