The best Sticky Footer

This document describes how to make a footer that sticks to the bottom of the page even if the page content is less than the browser window height, so you don’t have a footer appearing in the middle of the browser window. This solution is cross browser and you dont need a fixed height for the footer.

I’ve tried and come across many Sticky Footer on the web, but all have issues:

Pure CSS Sticky Footer: will not render correctly on all browsers, and you will have to add fixes or extra HTML markup for some browsers or old ones.
Pure JavaScript Sticky Footer that relies on an empty push div has rendering issues when resizing the window quickly.

So I decided to write my own code :

function positionFooter() { var mFoo = $("#myfooter"); if ((($(document.body).height() + mFoo.outerHeight()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) { mFoo.css({ position: "fixed", bottom: "0px" }); } else { mFoo.css({ position: "static" }); } } $(document).ready(function () { positionFooter(); $(window).scroll(positionFooter); $(window).resize(positionFooter); $(window).load(positionFooter); });

This code needs jQuery and will position the element footer with id “myfooter” at the bottom if the page length is shorter than the browser window length and will place it in the normal flow if the page is longer or equal to the browser window length.

.NET Ajax UpdatePanel & the Sticky Footer

If you're a .NET developer and using the ScriptManager and Ajax UpdatePanels you'll need a call to the javascript fonction positionFooter() after an ajax partial postback, because the page length will change when the updatepanel updates it’s content. So just add this code to the page or master page where your Update panel is defined, Just change "up1" with your UpdatePanel ID :

if (IsPostBack)
{
  ScriptManager.RegisterStartupScript(up1, up1.GetType(), "ppf", "positionFooter();", true);
}

Have fun and don't hesitate to ask me any questions or send me your thoughts.