I needed an element with a background to be 100% height and the usual solutions didn’t seem to work for this project. The problem with the other solutions around the web is that they either work when the page is short and without scrollbars, or they just work for longer page (with scrollbar).

A friend reminded me to set the element to display: table;, but said it might now work for IE7. He was right and here’s how to make it work for everyone.

The element I want full height for is .document and the base structure for the html is:

The CSS which works is: