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:
- 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.
- 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.
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>
The Script File
Download stickyFooter2013.js Here
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.
Gabriel Smoljár (@gabbsmo)
The link to the JS file is dead. Could you either fix that or embed copy/pastable code in the post?
Working on it… my company changed their public site and my files were on there.
sorry…this is the correct link: https://arutjothi.wordpress.com/2016/06/03/sharepoint-2013-office-365-sticky-footer/
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….
sorry for my late response. feel free to blog away. I’d be interested in reading it.
Thanks…I’ve blogged here: https://wordpress.com/read/feeds/13247189/posts/1047659945
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.
Thanks for checking out my solution. I’ll take a look at what your saying and see what I can do to handle that.
Is this footer capable for adjusting with screen ratio i.e. 75% screen size versus 100%
absolutely, just adjust the css of the width on the footer and it should be good to go.
Actually this is what I ended up doing. Adding an iframe webpart made the page leave the MDS mode.
if (typeof asyncDeltaManager != “undefined”)
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.
To get it working with MDS, replace
Nice Article,and very interesting.Thanks for sharing this one.