Wickham's XHTML & CSS tutorial

100% height for all viewport sizes without a scrollbar

1 gold icon If you want a background-image or color panel to extend to 100% of the viewport (browser screen) height in all situations, you have to set the style for the html and body to 100% as in html, body { height: 100%; margin: 0; }. The body style is for IE and the html style for other major browsers.
Add height: 100% and the different background-color or image to the containing div.
You also need to remove all top and bottom margins, padding and borders which would be created outside the 100% div height, creating a vertical scrollbar.
If you make the viewport so small that it requires a horizontal scrollbar, this creates extra height which also creates a small vertical scrollbar for about 16px.
The 100% height principle also applies to table heights. Unfortunately the principle does not work on Explorer on Mac.