19 Responses

1. 

   Noma Crosdale

   December 29, 2010

   A word is enough to the wise.

   Reply
2. 

   Gane

   January 12, 2011

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

   Reply
   • 

     estruyf

     January 12, 2011

     I will try to take a look at it.

3. 

   Gane

   January 12, 2011

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

   Reply
4. 

   Brian Arnold

   April 12, 2011

   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/

   Reply
5. 

   Chris Herdt

   May 5, 2011

   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.

   Reply
   • 

     estruyf

     May 6, 2011

     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.

6. 

   Daniel

   December 12, 2011

   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.

   Reply
7. 

   Daniel

   December 13, 2011

   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.

   Reply
8. 

   Jimmy

   March 9, 2012

   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?

   Reply
   • 

     estruyf

     March 9, 2012

     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

9. 

   Jet

   May 10, 2012

   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!

   Reply
   • 

     estruyf

     May 11, 2012

     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

10. 

    Anna Jhaveri

    August 1, 2012

    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

    Reply
    • 

      estruyf

      August 2, 2012

      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

11. 

    Anna Jhaveri

    August 3, 2012

    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

    Reply
    • 

      estruyf

      August 3, 2012

      Anna,

      You could try to work with the undocked ribbon version.

      Regards,
      EStruyf

12. 

    Laemon

    August 7, 2012

    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,

    Reply
    • 

      estruyf

      August 7, 2012

      Laemon,

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

      Regards,
      EStruyf