Sometimes you want the footer to stay at the bottom of the viewport. When you have a content area shorter than the viewport, you will end up with extra space between the footer and the bottom of the viewport. There are more than a few ways to try to fix this, but I just want to demonstrate a quick way in JQuery. This solution is assuming that you have a header, a content area, and a footer. You want to make sure that these areas actually carry a height. (If everything were floated in the header, you want to make sure you have a clear element after everything so the header has the correct height). Obviously, you need to replace my selectors with whatever you are using.

$(window).resize(function () {
	var headerHeight 		= $("header").height();
	var footerHeight	 	= $("footer").height();
	var contentHeight		= $("div#content_wrapper").height();
	
	// if the header + footer + content is less than the viewport, the footer isn't at the bottom
	if( (headerHeight + contentHeight + footerHeight) < $(this).height() )
		//set the height of the difference between the viewport and the header + footer
		$("div#content_wrapper").height($(this).height() - footerHeight - headerHeight);
});

And that's all there is to it. Let me know what you think. This fix is actually in use on this site right now, so you are welcome to view source and see it in action.