In a previous post I explained how to add a fixed footer to SharePoint 2010 sites. The idea of the fixed footer is that it would be placed on the bottom of the window, fixed to the browser’s bottom. The catch with SharePoint 2010 is that SharePoint removes the browser’s scroll bars and replaces them with scrollbars attached to the #s4-workspace div container. Our solution was to use a little javascript code to resize the s4-workspace container to provide room for the fixed footer. To see this complete solution, please refer to my previous post.
A question was raised by a fellow reader, Ridik. The question was how could this fixed footer be applied to a minimal master page when used for My Sites and Search Results. The catch with the minimal.master master page is that there is no #s4-workspace div.
Luckily the solution ends up being easier to implement then a fixed footer on standard SharePoint sites. The one catch is that the scroll bars will appear slightly different because we can now safely use the browser scroll bars.
Create the Fixed Footer
Again, creating a fixed footer is easy enough. We will use the same solution as the previous post. 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 #maincontent div as found in the default minimal master page. So after you create a copy of your minimal.master Master Page, because we all know you should never modify the minimal.master file directly, add the following code, right after the closing tag of the #maincontent 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 to 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. Originally this was more important for our previous solution and it is less important here. But to stay consistent, I suggest the primary footer container have no padding or margin.
One last piece of css to add. When this footer gets placed on the page it is placed over any other containers under it. It is taken out of the flow of the rest of the site. What ends up happening is that the bottom portion of your maincontent div might get hidden because it does not know the footer is there, so you need to add padding at the bottom of your maincontent div equal to at least to the height of your footer, i.e.
<style type=”text/css”>
#maincontent {
padding-bottom: 60px;
}
</style>
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 custom master page for now. It should be your custom master page because My Sites Hosts pages as well as search results pages use the custom master page. 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.
Unlike for standard SharePoint 2010 pages, no additional javascript is required. That’s it.
Conclusion
The primary complaint with this solution is that the scroll bars are now outside of the right of the footer, where-as in our other post the right scrollbar was above the footer. To make this post simple I provided a quick way to add a fixed footer. If you want to be consistent with your scroll bars then you would need a more complex solution. The premise of this would be to surround your s4-mini-header and maincontent divs with a container div similar to the s4-workspace div. The styles of this container div would including a fixed width, fixed height as well as overflow set to autoThen once the page loads using javascript, or I would suggest jquery to size this container div to fit within the browser, but provide space for the footer. Don’t forget to turn off the scroll bars in the body.
I will try to build up this solution in a third post but the above solution will hopefully help you get started.
