Azure / Office 365 / SharePoint Development / Search

V4.master Sticky Footer With Undocked Ribbon

on Aug 26, 2010 by Elio Struyf with 11 comments

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.

After the changes the CSS looks like this.

Here are a few screenshots of the sticky footer in action.

SharePoint Sticky Footer Example Image

Footer on a OOTB Team Site

SharePoint Sticky Footer Example Image 2

Footer on the bottom of a long page.

SharePoint Sticky Footer Example Image 3

The footer is not shown in the dialog windows.

Here is the masterpage zip file:

v4_Sticky_Footer.master

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.

Article comments

  • Stefan

    Just wanted to say thanks.

    This really helped me out!

  • Philip

    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

    Thank you very much :D

  • 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

      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

  • 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

      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

  • 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

    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

    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

  • Pingback: Sticky Footer Solution for SharePoint 2013 |()