Why does height 100% work when DOCTYPE is removed?

Question

This is the entire code:

Answer 1

You mean vertically? divs are block level elements and as such they do fill the parent horizontally by default.

In order for this to work, you need to also give the HTML tag a height of 100%.

html, body { height:100%; }

See here for a working sample:

http://jsfiddle.net/uhg0y9tm/1/

As stated by some of the others here, once you remove the first line (the HTML5 doctype), browsers will render the page in a different way and in that case, it's not necessary to give the HTML tag an explicit height of 100%.