Last year I posted a blog article which described the issue with SharePoint 2010 and having a footer. Well similarly SharePoint 2013 has some of the same obstacles when adding a footer. If you are interested in reading more detail into the issue w/ 2010 then go here: My SharePoint 2010 Sticky Footer Solution.

It basically boils down to these 2 issues:

  1. If you just add a footer to your master page it will be displayed directly under the page content. On a page that has little content then the footer may show half way up the page.
  2. Alternatively if you try a pure CSS sticky footer solution it may not work correctly either because SharePoint uses the page height to calculate where the scroll bars will go (mainly due to the header / ribbon always being at the top).

[Update 10/9/2013] – Added code from Robert, to handle MDS type pages.

[Update 9/1/2013] – I noticed that these scripts do not work on Team Sites, this is due to the Minimal Download Strategy Feature that is enabled. Turn that off and this work perfectly fine. I’m still researching how to make the scripts how with that feature enabled.

I’ve also updated the code to use it’s own function to detect height. Padding (top/bottom) can sometimes throw off the size computations.

Link the script file

As you can see below I’ve hosted my file in the Style Library

The Footer Control

Simply add this div after s4-bodyContainer in the master page file.

As you can see below an export of the DOM from the IE Dev Toolbar.

footer

Here below you can see where in the Master Page (based on seattle.master) I look for the id=”DeltaPlaceHolderUtilityContent” and you’ll see 3 </div> above it. I put it right between the 2nd & 3rd </div>

mp_footer

The Script File

Download stickyFooter2013.js Here

This script is a pure JavaScript solution which will work with a default master page. If you customize it then you’ll need to account for any differences. It basically adds the suite bar + ribbon + body + footer, and if that’s smaller than the viewport aka viewable area. It will expand the body by the difference so that they are equal.

This also operates in it’s own namespace so there won’t be any collisions

I also bind to the window resize event so if the size of the screen changes the ribbon should stay on the bottom.
sf
Enjoy!

Comments
  • Gabriel Smoljár (@gabbsmo)
    Posted at 1:30 am August 4, 2016
    Gabriel Smoljár (@gabbsmo)
    Reply
    Author

    The link to the JS file is dead. Could you either fix that or embed copy/pastable code in the post?

    • Thomas Daly
      Posted at 10:52 am August 6, 2016
      Thomas Daly
      Reply
      Author

      Working on it… my company changed their public site and my files were on there.

    • Thomas Daly
      Posted at 4:22 pm August 19, 2016
      Thomas Daly
      Reply
      Author

      script posted

  • arut
    Posted at 2:27 pm June 3, 2016
    arut
    Reply
    Author
  • arutjothi
    Posted at 5:08 pm February 5, 2016
    arutjothi
    Reply
    Author

    Hey Thomas…This solution helped me last month with the SharePoint footer problem that I was working on and I made certain subtle changes in my script while maintaining the actual logic… A big thanks to you (although a little late)…

    Would you mind if I wrote a blog about this solution? and of course, credits to you and reference to this blog too 🙂

    There are a lot of blogs about Custom SharePoint footer but not many that are so precise as this one….

  • Matthew
    Posted at 12:12 pm April 16, 2014
    Matthew
    Reply
    Author

    Impressive. However, your solution does not account for fullscreen display (F11) causing the function to apply additional spacing that can only be reset once the user refreshes the page.

    Also not sure if this is due to padding/margin issue you specified, but it appears the bottom border of an IE window retains its height area; causing a small white line to appear under the footer when maximizing the window.

    • Thomas Daly
      Posted at 4:14 pm April 16, 2014
      Thomas Daly
      Reply
      Author

      Thanks for checking out my solution. I’ll take a look at what your saying and see what I can do to handle that.

  • M Quinn
    Posted at 4:04 pm December 2, 2013
    M Quinn
    Reply
    Author

    Is this footer capable for adjusting with screen ratio i.e. 75% screen size versus 100%

    • Thomas Daly
      Posted at 1:50 pm December 10, 2013
      Thomas Daly
      Reply
      Author

      absolutely, just adjust the css of the width on the footer and it should be good to go.

  • Robert
    Posted at 8:20 am September 17, 2013
    Robert
    Reply
    Author

    Actually this is what I ended up doing. Adding an iframe webpart made the page leave the MDS mode.

    if (typeof asyncDeltaManager != “undefined”)
    asyncDeltaManager.add_endRequest(StickyFooter.OnPageLoad);
    else
    _spBodyOnLoadFunctionNames.push(“StickyFooter.OnPageLoad”);

    • Thomas Daly
      Posted at 4:46 pm September 18, 2013
      Thomas Daly
      Reply
      Author

      Thats great – Thanks for this! I will try this out. I’ve noticed that the footer sometimes won’t work on certain pages where partial page loads come into play. For example a datagrid page where the content takes time to come through. The footer will be in the middle. The asyncDeltaManager might fix that.

  • Robert
    Posted at 3:28 am September 17, 2013
    Robert
    Reply
    Author

    To get it working with MDS, replace
    _spBodyOnLoadFunctionNames.push(“StickyFooter.OnPageLoad”); with
    asyncDeltaManager.add_endRequest(StickyFooter.OnPageLoad);

  • samuel sandeep
    Posted at 9:16 am July 16, 2013
    samuel sandeep
    Reply
    Author

    Hi Thomas,

    Nice Article,and very interesting.Thanks for sharing this one.

    Sharepoint Developers

  • Leave a Reply