V4.master Sticky Footer With Docked Ribbon

August 26, 2010

After getting the footer working in the undocked version, I have tried to get it to work with a docked ribbon.

The problem is that SharePoint's Javascript will automatically calculate the exact size of the div "s4-workspace" each time you click on the ribbon or a webpart. This will push the footer off the screen or the bottom from the scrollbar falls of the screen.

I have worked with the same sticky html code as the previous version (sticky footer with undocked ribbon). only the positions of the div's and css is changed.

I have placed the wrapper inside the s4-workspace div and the footer inside the form tag. This will make it possible to have the footer on the bottom of the page, and when the page content is longer the footer will be pushed down.

The CSS that is used.

SharePoint 2010 with sticky footer Docked Ribbon

SharePoint 2010 with sticky footer Docked Ribbon

Here you can download the docked version: V4.Master_Footer_Docked_Ribbon
This version should work for Internet Explorer 8 and Firefox v3.6.8.


Master page update: 12/04/2011

I updated the master page today. There was a small problem with a "div" closing tag that was placed on the wrong line in the master page. Therefore I placed the updated master page online. Thanks to Brian Arnold to let me re-investigate a problem with Internet Explorer 7.


Master Page