Sticky Footers in SharePoint 7

I get this question a lot these days: “How can I add a sticky footer to the bottom of SharePoint”. So much so that I decided I need to have a blog post that points to my solution to the problem.

First, what it a sticky footer? I consider this to be a footer at the bottom of a page that stays “stuck” to the bottom of the browser window ONLY if the page content does not fill up the full page. If you want a footer that sticks to the bottom without considering the page content, you can easily float one above the content always stuck to the bottom with just absolute CSS positioning.

How do I solve it. There are many ways this problem could be solved ranging from intelligent HTML and CSS creation to jQuery based solutions. I am leaning towards a jQuery based solution because often with SharePoint you don’t have a ton of control over most of the HTML markup. In my solution, all you need is a

with an id of customFooter, like this:

<div id="customFooter"></div>

at the bottom of your master page (you probably want to add some height and some other styling to this div as well). Then you need a reference to jQuery and then the JavaScript that I include below that will measure the page content height and add it to the ribbon height and determine if those two together are smaller than the browser window. If they are smaller, the jQuery will add some top-margin to the footer, just enough to push it to the bottom of the window. I won’t go into how you should add jQuery to SharePoint but here is a link that can help you determine the best method: http://drisgill.com/go/jquery-sharepoint.

I have two scripts, one for SharePoint 2010 and one for SharePoint 2013. The differences are:

  • SP2010 – I use jQuery.noConflict(); and jQuery instead of $ throughout because some things in SP2010 conflict with the use of the dollar sign.
  • SP2013 – I use the typical jQuery $ reference and the way the ribbon height is measured is a bit more complicated since there are a couple different ways you can load the ribbon depending on if you use Seattle.master or the Design Manager

Download the jQuery code from here: http://drisgill.com/go/sp-sticky-footer. Please consider this code to by experimental, I haven’t thoroughly tested it at this point. Use my contact link at the top or hit me up on Twitter if you run into issues with it.

Here is a screenshot of how I pull in the stickyfooter scripts. I place it at the bottom of my page under the customFooter.

image

And here is a screenshot of my (rather boring) footer sticking to the bottom of the browser:

image

7 thoughts on “Sticky Footers in SharePoint

  1. Reply bniaulin Jan 23, 2013 10:41 am

    Very nice article, I have done it in 2013 using CSS for those that want to use that approach. Though the article talks about something else, there is a section on creating the sticky footer. The downside is that it will go over content. http://bniaulin.wordpress.com/2012/12/31/how-to-edit-the-sharepoint-2013-preview-file-for-a-master-page/

  2. Reply SharePoint Innovations Jan 30, 2013 6:52 pm

    Thanks for sharing! Great post

  3. Reply Rodrigo Ogiwara Apr 3, 2014 7:54 am

    Thanks for the code, great post! Just a thing, when you click to add a new document for example, the page loads an iframe for upload the documents and the footer also appears there. I added this in your script to check if the page is loading from an iframe the footer will not show.

    
    var isInIframe = (window.location != window.parent.location) ? true : false;
      
    if (isInIframe == false)
    {
       //show footer after calculating
       $footer.show();
    }
    

  4. Reply marc May 6, 2014 1:24 pm

    I added a tabbed webpart from (http://www.ashokraja.me/post/Combining-Multiple-Web-Parts-in-SharePoint-2013-to-create-a-Tab-Pages-WebPart.aspx) to my 2013 environment. Now if the content of those tabs is different heights, the footer does not adjust to the new page height. Is there an event that could be detected to call the “calcFooter”

  5. Reply Diego Jul 8, 2014 1:24 pm

    Will this solution work for responsive footers (in which content within the footer wraps as browser width is reduced, causing height of footer to increase)?
    Thanks.

  6. Reply Dan Sep 25, 2014 2:14 am

    In order to get this to work in SharePoint Online you need to take into account the O365 bar at the top. I added this to the code:

    var o365NavbarHeight = $("#O365_NavHeader").height();
    if (o365NavbarHeight == null) o365NavbarHeight = 0;

    and then changed

    var difference = windowheight - (bodyheight + ribbonheight + footerheight + o365NavbarHeight);

    to

    var difference = windowheight - (bodyheight + ribbonheight + footerheight);

  7. Reply Dan Sep 25, 2014 2:17 am

    Edit: in my above comment, the last two code snippets are in the wrong order.

Leave a Reply