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">

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;

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, 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");

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, although the gist of it is that any time the s4-workspace div is resized, our function will be triggered right afterwards.

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. murali January 26, 2012

    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. max February 2, 2012

    Outstanding post! Exactly what I’ve been struggling with for some time now.

  3. arut February 10, 2012

    Thanks a lot

  4. Daniel March 7, 2012

    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. Eric Overfield March 8, 2012

      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.

  5. Ridik April 2, 2012

    How can we achieve the same for a minimal master page where we dont’ have div “s4-workspace”?

    1. Eric Overfield May 3, 2012

      Hi Ridik,
      I wrote a new post that may help you with a fixed footer in Minimal Master Pages for my sites and search results.

  6. Matt April 6, 2012

    How do you stop the jquery script from running when a modal dialog window is opened?

    1. Matt April 6, 2012
  7. Usman April 16, 2012

    Hi Daniel,
    Nice post about “Adding a Fixed Footer to your SharePoint Master Page” thanks

  8. Rustam April 23, 2012

    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. Eric Overfield April 23, 2012

        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.

  9. Ricky April 26, 2012

    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. Eric Overfield April 27, 2012

      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.

  10. […] a previous post I explained how to add a fixed footer to SharePoint 2010 sites. The idea of the fixed footer is […]

  11. bashd February 22, 2013

    Thank you very much, works perfectly fine!

  12. bashd February 22, 2013

    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. Eric Overfield February 22, 2013

      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.

  13. Sarath K July 17, 2015

    will this solution work for SharePoint 2013, (Seattle.master)

    1. Pixelmill February 20, 2016

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

  14. Marouene KAROUI August 26, 2015

    I did the resizing but didn’t use ExecuteOrDelay function so thank you very much 🙂

Leave a Comment

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

Enter Code *

Filed Under


The Microsoft Viva modules are revolutionary tools used to aid one's work stability and improve their digital workspace experience. Find out more by tuning into to Eric Overfield's "The State of Microsoft Viva & The Digital Workspace" PixelMill Webinar!

Not sure what an Employee Experience Platform is and how Microsoft Viva fits into that? Then check out the PixelMill Webinar "The state of Microsoft Viva and The Digital Workspace" by Eric Overfield!

Get excited for our next episode of the #PixelMillWebinars! In this session:
-Power Platform 101:Power Automate, Power Apps, Power Virtual Agents, Power Pages & Power BI  
-Power Platform in action on an intranet  
-Power Platform adoption best practices

Imagine having all the tools and resources you need to be successful in just one place! Eric Overfield digs deeper into the details of Microsoft Viva and how Teams + Viva can make that dream a reality. Watch the latest PixelMill Webinar to learn more!

Get excited for our next episode of the #PixelMillWebinars! Our CPO, Microsoft MVP & Regional Director Eric Overfield breaks down:
-Each of the 9 GA Viva Modules
-How the modules integrate
-Successful practices when rolling out Viva in your organization

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch