Wickham's HTML & CSS tutorial

100% height for all viewport sizes without a scrollbar

1 gold icon This page shows how to make a background-image or color panel extend to 100% of the viewport (browser screen) height in all situations.
Look at the source code head section style tag and conditional comment for lt ie 7 (less than IE7).
Remove all top and bottom margins, padding and borders which would be created outside the 100% div height which would create a vertical scrollbar.
A small width viewport creates 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.
The containing div has overflow: auto; so that a scrollbar is created if the content exceeds the 100% window height, but no scrollbar or a dummy scrollbar is created if content is less than 100% of the height.