Dec
20
2010

Creating a Sticky Footer for your Site

by   |  Posted in Tutorials  |  9 comments

I was messing around with the WordPress admin and I somehow managed to break the footer. This made me pay a bit more attention to how it actually worked, and I realized that it used a pretty awesome CSS trick to make sure that no matter what size your browser window was, it stuck to the bottom, unless of course your page was longer. But this is a pretty cool effect and I managed to get it working in my Support Forum so I thought I would share it.

Here is exactly how the HTML looks in the WordPress admin when it is broken down to its base components:

<html>
<body>
<div id="wpwrap">
  <div id="wpcontent">
  </div>
</div>
<div id="footer">
</div>
</body>
</html>

Here is the CSS that makes the footer sticky:

html, body {
  height: 100%;
}
 
#wpwrap {
  height: auto;
  min-height: 100%;
  width: 100%;
}
 
#wpcontent {
    height: 100%;
    padding-bottom: 50px;
}
 
#footer {
  margin-top: -50px;
  height: 50px;
}

Now your footer is forced to always stay “stuck” at the bottom of the browser window. Just make sure that the padding at the bottom of the main content (#wpcontent) is the same as the height and the negative top margin of the footer (#footer).

This technique works in Firefox, Safari, Chrome and IE.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , ,

Short URL: http://bit.ly/dGOK8C

Discussion 9 Comments

  1. David Hughes on December 24, 2010 at 12:34 am

    Cool little trick!

    I remember back when I was a kid and just started learning CSS, this was one of the most difficult things for me to figure out how to do.

    The transition from table layouts to CSS was a hard one for me.

  2. Greg Washington on December 27, 2010 at 3:13 pm

    Way to keep the code simple, Thanks! its crazy how the resolution of monitors have changed to the point where you almost have to either have a huge amount of content or have the sticky footer in place.

  3. Forex fan on January 15, 2011 at 4:59 pm

    And where is demo? :)

  4. FreewayActions on February 4, 2011 at 9:41 am

    This is a nice trick although I did have to remove the default margin on the body to get rid of the vertical scroll bar in Safari.

    • Tom Nisbet on February 24, 2011 at 4:02 pm

      Hi there, I noticed you had the same problem with the scroll bar in safari. i’ve tried changing all the default body margins to 0px but still now luck. Any ideas of how to get rid of this? it would be such a great help!

      cheers

  5. wordpress skins on February 21, 2011 at 2:38 am

    excellent tutorial to add sticky footer to websites.. i will love to read more tutorials on your website.

  6. Tom Nisbet on February 24, 2011 at 3:50 pm

    Hi there, what a great tutorial, although I am now getting a scroll bar in Safari, when the content on my site is not enough to scroll. Would you be able to help me on how to get rid of this?? so the main content is just above the footer, rather than there being a space forcing a scroll.

    Thanks :)

  7. heywho on March 2, 2011 at 2:00 am

    how would one create a footer, such as below, that appeared at a set distance from the page top — for a consistant look, but a large number of posts could exist on the page, and you could keep scrolling through them… Just w/ the footer (site info, navigation categories, links ) always present…

    So… a constant visible landing page grid, with (x) number of posts potentially scrollable, but hidden at first by the sticky footer?

    • c.bavota on March 2, 2011 at 10:14 am

      I think you can do that with CSS using a fixed position.