SharePoint 2013 sticky footer

Adding a footer to SharePoint masterpage may be a bit tricky, since SharePoint automatically recalculates height and scrolling properties of some default div containers on page load. Today I will show how to add a so called "sticky footer" to a SharePoint masterpage using Javascript. The sticky footer will be displayed always at the bottom of the page, even if there is little content. We will base on the SharePoint 2013 "Seattle" masterpage.

Masterpage structure changes

First we need to add a footer container (div) to our masterpage, that will contain the footer content. We add this at the end of the default "s4-workspace" div, right after the "s4-bodyContainer" div:

<div id="s4-workspace" class="ms-core-overlay">
    <div id="s4-bodyContainer">
    (...)
    </div>
    <div id="footer">Your footer content goes here</div>
</div>

Now you need to populate your footer with content and set its CSS properties e.g. height.

Javascript code

Now that we have our footer container let's position it with some javascript code:

// generic function for resizing elements within their containers
function adjustContainerHeightToObject(container, content, offset){
 var container = $(container);
 var content = $(content, container);
 if (container.height() > content.height()) {
  content.height(container.height() + offset);
 }
}

// specific function for resizing the s4-body container
function resizeMainContent(){
    // as offset we provide the negative value of the height of our footer
    adjustContainerHeightToObject('#s4-workspace', '#s4-bodyContainer', -50); // for footer with 50px height
}

// call resize function on page load
_spBodyOnLoadFunctionNames.push("resizeMainContent");

_spBodyOnLoadFunctionNames.push() vs. $(document).ready()

Notice that instead of using regular jQuery ready() event we are using SharePoint's custom mechanism for calling function after the page loads. This will ensure that all SharePoint resizing code has already executed when calling our function.