This body will ALWAYS consume at least 100% of the viewport

On the left, there is a border which is part of the body element. Ordinarily, the border would stop with the height of the content. Applying what amounts to three lines of code, we can make it stretch the entire height of content, or, at a minimum, the height of the viewport.

You can test this in your browser by shrinking the viewport vertically (that means, make it shorter).

The lines that make this work are emphasized:

/* make the html element reach the height
			of the viewport */
html { height: 100%; margin: 0; padding: 0; }
body { 
	/* Good browsers understand min-height */
	min-height: 100%;
	
	/* give us a border */
	border-left: 10px solid #900;
	
	/* I don't want the content right alongside
	the border */
	padding: 0 1em;
	
	/* make the font look pretty */
	font-size: 82%;
	font-family: verdana, arial, helvetica, sans-serif;
}

/* this is the holly hack which gives IE
	a body height of 100% since it doesn't
	understand min-height.
	
   since IE treats height like min-height,
   we're ok */
* html body { height: 100%; }

This works in: IE5/55, IE6, FireFox, and Opera. It should work in others.