Office 365 & SharePoint Search / Development / Branding

V4.master Sticky Footer With Docked Ribbon

on Aug 26, 2010 by Elio Struyf with 21 comments

After getting the footer working in the undocked version, I have tried to get it to work with a docked ribbon.

The problem is that SharePoint's Javascript will automatically calculate the exact size of the div "s4-workspace" each time you click on the ribbon or a webpart. This will push the footer off the screen or the bottom from the scrollbar falls of the screen.

I have worked with the same sticky html code as the previous version (sticky footer with undocked ribbon). only the positions of the div's and css is changed.

I have placed the wrapper inside the s4-workspace div and the footer inside the form tag. This will make it possible to have the footer on the bottom of the page, and when the page content is longer the footer will be pushed down.

The CSS that is used.

SharePoint 2010 with sticky footer Docked Ribbon

SharePoint 2010 with sticky footer Docked Ribbon

Here you can download the docked version: V4.Master_Footer_Docked_Ribbon
This version should work for Internet Explorer 8 and Firefox v3.6.8.

Changes

Master page update: 12/04/2011

I updated the master page today. There was a small problem with a "div" closing tag that was placed on the wrong line in the master page. Therefore I placed the updated master page online. Thanks to Brian Arnold to let me re-investigate a problem with Internet Explorer 7.

Download

Master Page

Article comments

  • Noma Crosdale

    A word is enough to the wise.

  • Gane

    This is working fine for v4.master, can you suggest some idea for using the sticky footer in fast search center template

    • estruyf

      I will try to take a look at it.

  • Gane

    And also for meeting work space template..
    Thanks in advance…

  • Thanks for the update estruyf.

    I found there were some additional problems that occur in IE7 that seem to show up when a fixed width layout with sticky footers. I’ve posted a solution on my blog at http://spbrianarnold.wordpress.com/2011/04/12/sharepoint-2010-fixed-width-masterpage-with-sticky-footer/

  • This is a great resource, thanks!

    Is there any way to prevent the footer from first appearing just below the #s4-mainarea div before it jumps down to the bottom of the page? I assume this is due to the ribbon positioning scripts–I noticed the same things in my attempts to create a docked-ribbon-sticky-footer layout for SharePoint 2010.

    • estruyf

      Indeed, the JavaScript from SharePoint calculates the browser window size and set the height to the workspace section. This is why it is pushed down to the bottom. It also happens with the vertical scrollbar.

      This could be prevented if you remove the “s4-workspace” id, but note that you need to do some extra styling.

  • Daniel

    Hi

    An excellent post which has really helped
    At the request of the client I am working for I have
    1) made the changes to a v4.master as per your v4.sticky_footer_docked_ribbon.master
    2) moved the css into an external .css file
    3) created a table to hold my footer.

    © Copyright 2011 myniceclient.com

    The only thing is when I scroll down on the page, my last web part (shared docs) cuts in to the footer. Is this because the footer remain static regardless of the content surrounding it.

  • Daniel

    Hi

    Ignore the last post. It looks like there is something wrong my v4.master – I thought I copied the relevant stuff from yours. Anyway set v4.sticky_footer_docked as default master page.. and everything is good.

  • Jimmy

    Hello Elio,

    Thanks for this solution. I’ve created my own master and css files based on your input, when i applied both to my site everything worked like a charm except for the Gantt chart in the projecttask list in IE 8/9. I solved this by removing:
    * {
    margin: 0;
    }
    Now the Gantt Chartt is rendering fine in all browsers and the footer is still sticked at the bottom.

    But i now ask myself is there is a reason you use this on your css, cause until now i can’t see any side effect after removing that piece of the code?

    • estruyf

      Thank you Jimmy for your comment.

      You can indeed leave that part out. It comes from the sticky footer solution I initially used:

      Regards,
      EStruyf

  • Jet

    Hi EStruyf,

    Thanks for sharing your knowledge, its working great but one problem. i dont know if its only me but the upload dialog box is not working after i apply the solution? its completly blank. can you please help.

    Thanks!

    • estruyf

      Jet,

      I just checked it and for me the upload screen does not give any problems.
      In which browser are you testing this?

      Regards,
      EStruyf

  • Anna Jhaveri

    Hi EStruyf,

    I implemented your solution, it works fine but footer jumps when i have less content in page i.e. during page load the footer is shown exactly below the content area then after page load completes, the footer goes down to bottom of the page..so is there any solution that footer remains at the bottom of the page during the page load.

    Thanks,
    Anna Jhaveri

    • estruyf

      Anna,

      That is standard SharePoint 2010 behavior. The JavaScript of SharePoint calculates the window size, and set a fixed height to the workspace div, this is causing the jump behavior.

      Regards,
      EStruyf

  • Anna Jhaveri

    Hi EStruyf,

    Thank you for your reply,. But i have requirement of sticky footer and it should not jump on page load. Is there any other solution to this problem as this behavior is not acceptable for user

  • Laemon

    Thanks Estruyf! That resolved the footer issue, I was facing. However, in my case, I have fixed width page. I would like to have the footer just below the page with same width as the body.

    When I fix the width of the footer div to body width, the footer pushes towards completetly to the left of the brower window. How can this be resolved?

    Thanks,

    • estruyf

      Laemon,

      Thank you for the feedback. What you could try is set the margin of your footer to “margin: 0 auto;”.

      Regards,
      EStruyf

  • I’m trying to implement this solution and everything works fine.. except for in Chrome. In Chrome the scroll bar is completely gone. Have you run into something like this before or do you know of a solution/why that would be happening?

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