Adding a Fixed Footer to your SharePoint 2010 Master Page

While at SharePoint Conference 2011 last week in Anaheim, California, I was asked to participate as the SharePoint Branding Expert at the “Ask the Experts” event.

One of the conference attendees was having difficulties applying a fixed footer to his SharePoint 2010 Foundation site. After trying to explain the theory of having to modify the height of the s4-workspace div, I told him I would create sample code for him and publish it on our PixelMill blog.

Please note that this solution requires javascript as well as a current jquery library. I have found so few browsers that do not allow javascript that I believe this to be a reliable solution. I also assume that the ribbon will stay at the top and that the s4-workspace div is still being used for your primary content.

Create the Fixed Footer

Creating a fixed footer is easy enough. All you need to do is create a new div and add it most anywhere in your Master Page. It can go almost anywhere because it will be fixed to your browser window. I recommend right after the closing </div> tag of your s4-workspace div though. So after you create a copy of your v4.master Master Page, because we all know you should never modify the v4.master file directly, add the following code, right after the closing tag of the s4-workspace div.

<div id="footer-fixed">
</div>

You can of course add whatever content, child tags and containers, etc, you want within this footer-fixed div. Next we need to provide basic css for this div, that has an id of footer-fixed. Add the following css in a location of your choice.

If you choose to add the css to the head section of your Master Page, add the following just before the closing </head> tag.

<style type=”text/css”>
#footer-fixed {
	position: fixed;
	height: 60px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	background-color: #000;
}
</style>

Or just add what is between the <style></style> tags in an alternative CSS location or your own custom stylesheet.

What this little block of CSS code does is tells the html element with an id of footer-fixed, our footer div, that it’s position is fixed to the browser window, that its height is 60 pixels (you can change this as needed), it’s width is 100%, or the entire width of the window, and to then position the element 0 pixels from the bottom of the browser window and 0 pixels from the left of the browser window. I have set the background color to black just so that the footer is more visible without any content.

You can change the height to fit your needs, but I do not suggest adding margins or padding to this footer div. If you need padding and margins then I suggest you add a child div within this footer-fixed div and apply the margins and padding here. This is primarily because if you want left or right padding or margins then the width is no longer 100% and if you add top or bottom padding or margins then the browser will have more difficulty determining the height of the div.

If you added the style directly to your Master Page, go ahead and save the Master Page if you wish and set it as your default master page for now. If you added the css to a custom stylesheet, update your Master Page to reference this stylesheet and save. Reload your site and you will see the fixed footer, but if the page you load has too much content to fit in the browser window then the vertical scrollbar ends up under the fixed footer. This is because the right and bottom scrollbars are not a part of the browser window, rather they are added by SharePoint’s init.js javascript file to the s4-workspace. This was Microsoft’s way of having a fixed ribbon on the top of SharePoint sites and has caused many Branding projects delays.

So how do we fix this?

My method is to use a little jquery and a built in javascript function provided by SharePoint. We will now want to link to jquery somehow. I personally suggest downloading the latest jquery library from jquery.com, then adding it to your Style Library, Site Assets or scripts directory. In my case I added it to the /Style Library/scripts directory.

Then add the following line of code to the head section of your Master Page.

<SharePoint:ScriptLink language="javascript" name="~SiteCollection/Style Library/Scripts/jquery-1.5.min.js" runat="server"/>

I added this line just after the <SharePoint:CustomJSUrl runat=”server”/> line, although you could add it to the bottom of your head section. Don’t forget to change the “name” value to match the directory where you placed your jquery library.

Finally add the following javascript at the bottom of your <head> section

<script type="text/javascript">
function resizes4WP()
{
	if ($("#s4-workspace").length && $("#footer-fixed").length)
		$("#s4-workspace").css('height', ($("#s4-workspace").height() - $("#footer-fixed").height()) + 'px');
	}
	ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(resizes4WP); }, "init.js");
</script>

This is where the magic happens. What we are doing is creating a simple function, resizes4WP that makes sure that s4-workspace and footer-fixed exist. It then simply modifies the height of the s4-workspace div to allow room for the fixed footer. Great little function, but we need it to run after the browser has already fired the built in javascript code that determines the proper height of the s4-workspace in the first place. Luckily SharePoint 2010 provides such a function, then ExecuteOrDelayUntilScriptLoaded function. You can learn more about this function here http://msdn.microsoft.com/en-us/library/ff411788.aspx, although the gist of it is that any time the s4-workspace div is resized, our function will be triggered right afterwards.

Conclusion

There are other ways to accomplish this same task. I have heard of using padding at the bottom of the s4-bodyContainer div, but then you have to add more javascript to still account for the size of the s4-workspace div to make the horizontal scrollbar visible.

Have you used a different technique? Please tell us as others would probably like to know as well.

23 thoughts on “Adding a Fixed Footer to your SharePoint 2010 Master Page

  1. if you do little modifications like below. then there won’t be flickering effects in IE and other browsers. else, the scroptloaded keep in refreshing the page.

    var resized = false;

    function resizes4WP()
    {
    if ($(“#s4-workspace”).length && $(“#acecqafooter”).length && !resized){
    $(“#s4-workspace”).css(‘height’, ($(“#s4-workspace”).height() – $(“#acecqafooter”).height()) + ‘px’);
    resized = true;
    }
    }
    ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(resizes4WP); }, “init.js”);

  2. I’m still having the issue with the scroll bar running behind the footer. I’ve applied the jQuery as you have listed, it just doesn’t seem to be having any effect. jQuery is not my thing so maybe I’m missing something. I downloaded jQuery v1.7.1.js and placed that and my css in the site assets library of the site I’m testing with.

    1. Hi Daniel,

      It sounds to me as though the resizes4WP function is not firing like it is supposed to. What this function does is make sure that your w4-workspace container, the main container that contains the scrollbar, is shrunk so as to allow from room for the footer. Without looking at your particular site, I am not sure what else could be the problem.

  3. Thanks a lot for this simple solution.

    It looks to be working smoothly except when I open any image library the ribbon context tabs do not show anything. Other types of libraries seem to work fine. Could you please check it ?

      1. Hi Rustam,

        Thanks for the solution. I have ran into similar issues with image libraries but never went through the process to figure out what was causing it. Each time I was able to hide the thumbnails as they were not needed anyhow. It’s nice to know what was causing the problem.

  4. I am having same issue as Daniel but it seems its because we have a css file that we are referencing while your code is viable if the CSS modifications are in master page itself. How can I reference footer from my CSS file into your javascript?

    1. Hi Ricky,

      There is only one css id class that is needed for this footer. It’s the id class, #footer-fixed. You should be able to clase this id class definition and its six properties directly in your attached stylesheet.

      You definetly do not need need to add the css directly to the master page, nor would I normally recommend this. I provided this as an example as some are justing for a quick, dirty way to add code.

  5. I had some issues using it, as when I was openening certain sites, the script failed. Corrected it this way:

    var jq = $.noConflict();
    function resizes4WP()
    {
    if (jq(“#s4-workspace”).length && jq(“#footer-fixed”).length)
    jq(“#s4-workspace”).css(‘height’, (jq(“#s4-workspace”).height()
    – jq(“#footer-fixed”).height()) + ‘px’);
    }
    ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(resizes4WP); }, “init.js”);

    Sorry for the bad indentation

    1. Hi,

      Good point and thanks for the suggestion. Yes, there are some other libraries that I have seen SharePoint use that want control of $, so $.noConflict() or jQuery.noConflict() may be a preferred metho.

      Thanks again for the suggestion.

    1. Yes, the primary strategy of this solution will work in 2013+ as the workspace and bodyContainer of SharePoint have yet to change.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Check *

Filed Under

Another successful webinar! Thank you to all who joined us, and thank you to @EricOverfield for your amazing sessio… https://t.co/OR3Z0f6LBp

And heeeeeeeeeere we go! #PixelMillWebinars

5 minute warning! Join us for the next episode of the #PixelMillWebinars

15 minutes to go! Don't miss this month's episode of the #PixelMillWebinars!

30 minutes away from the next episode of the #PixelMillWebinars! If you haven't registered yet, what are you waitin… https://t.co/NGVrC6QPYB