Hi,
This is actually my first blog post and it’s about my first real frustration and moment of joy with SharePoint 2010.
This week I wanted to insert a “sticky” footer to my masterpage (v4.master). For two days I have tried to get it working on Internet Explorer and Firefox, but for some reasons it always came out as a disappointment. Sometimes it was only working in Firefox and vice versa.
Today I wanted to retry and took a new copy of my v4.master page and made a clean html file with a working “sticky” footer layout. This layout is based on the one of Ryan Fait. After that I inserted everything from the original v4.master page.
It was trial and error, but I made it to the end. I finally succeeded getting the footer where HE should be!
Most of the problems were related to the SharePoint Dialog window. In Firefox it only show scrollbars and could not see the content. In Internet Explorer the dialog rendered correctly but the content was gone. After removing the "v4master" id from the body, things got a lot easier. I used a few Internet Explorer CSS selectors to get it working.
Here is my HTML starters code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sticky Footer</title> <style type="text/css"> * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; } .footer, .push { height: 40px; } .footer { background: #ccc; } </style> </head> <body> <div class="wrapper"> <!-- Content --> <div class="push"></div> </div> <div class="footer"> <span>This is the footer</span> </div> </body> </html> |
After the changes the CSS looks like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
html, body { height: 100%; } html.ms-dialog body { /* Show the vertical scrollbar only when needed in the dialog forms. */ overflow-y: visible; } form { /* Needs to have a value, otherwise the form will not be shown. */ height: 1%\9 !important; /* IE8 and below */ } .wrapper { min-height: 100%; height: auto !important; height: 100%; /* The bottom margin is the negative value of the footer's height */ margin: 0 auto -40px; } .footer, .push { /* .push must be the same height as .footer */ height: 40px; /* Multicolumn Layout With Sticky Footer */ clear: both; } .footer { background: #ccc; } /* Set the dialog overlay to 100% width and Height. Otherwise the page body will show scrollbars. */ .ms-dlgOverlay { height: 100% !important; width: 100% !important; } body #s4-workspace { overflow-x: hidden; /* In IE8 the horizontal scrollbar needs to be visible. */ /* Without it will sometimes occur that you cannot scroll. */ overflow-x: visible\9; overflow-y: visible; height: 100% !important; } |
Here are a few screenshots of the sticky footer in action.
Footer on a OOTB Team Site
Footer on the bottom of a long page.
The footer is not shown in the dialog windows.
Here is the masterpage zip file:
This version is tested in IE7, IE8, IE9, and Firefox v3+.
Changes
Update: 30/05/2012
Vinod noticed that this solution was not workfing correctly for IE7. Therefor I have updated the CSS and master page file, so that the solution now also works for IE7.
Stefan
December 29, 2010
Just wanted to say thanks.
This really helped me out!
Philip
March 9, 2011
I’ve tried insert a footer to my masterpage for a few days and i found this. Changed a few things and by now it works – absolutely amazing. Thanks man.
HoShang
December 20, 2011
Thank you very much :D
Vinod
May 30, 2012
Is the push is mandatory?, i tried fixing the footer with out push it works in IE8 but in IE7 the content goes behind it. for the footer class i have given position relative; bottom:0; height:120px; and wrapper class i have giver margin-bottom:-120px height of the footer. any fix for IE7
estruyf
May 30, 2012
The push DIV is indeed mandatory when you want the footer to always show up at the bottom of the page or after the content (when you need to scroll).
What I understand is that you want to have an footer that always appear at the bottom of the page, and when you need to scroll, that content falls behind the footer.
A possible solution could be as follows:
.footer {
bottom: 0;
position: fixed;
width: 100%;
}
.push {
display: block;
height: 40px;
width: 100%;
}
Regards,
EStruyf
Vinod
May 30, 2012
Thanks for prompt respond, the footer should appear bottom of the browser but it should push down when content grows for IE8 it works perfect but for IE7 content goes behind the footer. Here i have admit that the footer is inside of s4-workspace not inside of s4-bodycontainer. If as per your suggestion the position:fixed when content scrolls down the footer stays at the bottom and content behind the footer.
estruyf
May 30, 2012
Vinod,
Ok my fault, I thought you wanted it to appear at the bottom of the browser. To make it work in IE7 you need to remove the following lines of CSS:
body {
/* Always show the scrollbar to render the page correctly. */
overflow-y: scroll;
}
PS: this was never tested in IE7, so thank you for notifying me.
Regards,
EStruyf
Vinod
May 30, 2012
Thanks estruyf for your response,will figure it out, if im placing the footer inside the bodycontainer and using display:table and footer as display:table-row is working in both try it.
shile
August 29, 2012
Hello estruyf,
Very good post here! I was wondering if there is a way to centralize the footer instead of aligning it to the bottom left?
estruyf
August 29, 2012
shile,
That should be possible by giving a fixed with to your footer and setting the left and right margin to “auto” (margin: 0 auto).
Regards,
EStruyf