SharePoint Branding: Sicky footer in SharePoint 2010

I've researched a bit for a simple solution to implement sticky footers in SharePoint 2010 but I didn't find anything that suited me. I tried to implement it myself, but soon figured out that I wouldn't go far using just CSS and HTML. So I brought in the big guns: JavaScript.

The Solution Explained

I only use JavaScript to reposition the footer if the content isn't big enough to stick the footer to the bottom of the window.

Since SharePoint by default uses JavaScript to handle the ribbon and the size of the scrollable area, positioning an element relative to another isn't that straight forward.  So after a few failed attempts I came up with a nifty solution to get the sticky footer working. What I do is resize one of the content wrapper divs (div#s4-bodyContainer) to fill all the available window space (minus the space needed for the footer and ribbon).

I also have some code in place to handle window resizing correctly.

The Solution's Code

Insert your footer code immediately after the end of div#s4-bodyContainer, at the bottom of the master page file.

<SharePoint:DeveloperDashboard ID="DeveloperDashboard1" runat="server" />
</div> <!-- end of #s4-bodyContainer -->

<div id="footer" class="s4-notdlg">
</div>

You can add to the footer whatever elements you need, it won't affect the end result. I use the s4-notdlg class so that the footer doesn't show up in the dialog boxes.

Now the CSS.

#footer {
    clear: both;
    height: 80px;
    width: 100%;
}

Pretty simple too. If i stopped here I would have a non-sticky footer:  if the page is bigger than the window height then the footer would be perfectly positioned, if not it would be floating just bellow the end of the content and you'd have an empty space from the end of the footer to the end of the window.

So when the window is bigger than the content we'll use JavaScript to absolute position the footer. I used jQuery, but you can implement this in plain JavaScript if it suits you better.

jQuery(document).ready(function () {
    // on resize
    jQuery(window).resize(function (e) {
        fixFooterPosition();
    });
    
    // on load
    fixFooterPosition();
});

function fixFooterPosition() {    
    var ribbonH = jQuery("#s4-ribbonrow").height();
    var footerH = jQuery("#footer").height(); 
    var windowHeight = jQuery(window).height();
    
    var h = windowHeight - footerH - ribbonH; 
    
    var bodyContainer = jQuery("#s4-bodyContainer"); 
    
    if (h >= bodyContainer.height()) {
        bodyContainer.height(h);        
    }
    else {
        // reset height - important on resizing
        bodyContainer.css("height","auto");
    }
}

The JavaScript explained

To the height of the browser window I subtract the height of the ribbon and the height of the footer, this gives me the height #s4-bodyContainer needs to be to fill the rest of the window. I only set #s4-bodyContainer's height to this value if it's current height is smaller than the new height.

If the #s4-bodyContainer's height isn't changed in the script, then I'll reset it. This is necessary for when the page resizes.

A couple of failed attempts

In a first version I've tried to position the footer absolutely, to the bottom of the window, if the content wasn't as big as the window. That resulted in a very strange behavior when page was resized.

After that, in a solution closer to the final one I tried setting the #s4-bodyContainer with a height relative to #s4-workspace. But since SharePoint resizes this div with JavaScript as well, this didn't work at all.