The footer shown on the screen shot below will remain at the bottom of the page even if you re-size the page.
This is great if your site has a content area that is not that tall, and the site is displayed on a large monitor. This way the footer will be pushed to the bottom of the screen. If content exceeds the screen height it will push the footer off the screen. A little tweak with jQuery to make the context dive scroll if you want the footer to be truly "sticky."
Open the example below in a new window.
function ResizeContent() {
//Height of the available content area is Page Height - (Header and Footer height.
//In this case 100px;
var ContentHeight = Math.round($(window).height() - 100);
ContentHeight = ContentHeight + "px";
$("#MainContainer").css("min-height", ContentHeight);
};
$(function () {
//Resize the content after page load or resize
ResizeContent();
window.onresize = function () {
ResizeContent();
};
});