jQuery Sticky Footer

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

            window.onresize = function () {