Sticky CSS Footer

Need a footer that sticks to the bottom of the page if it’s content doesn’t fill the window? Need a footer that also acts normally when the page’s content is larger than the window?

I’ve always been frustrated by the limitations with the footer in web pages, but I finally stumbled upon a solution that does everything you want!

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.site-wrapper {
  min-height: 100%;
  height: auto !important; /* IE min-height hack */
  height: 100%;
}
.pusher {
  height:3em; /* this is the same height as the footer */
}
.footer {
  clear: both;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em; /* this is the negative value of the footer's height */
}

HTML

1
2
3
4
5
6
7
8
9
10
11

<html>
  <body>
    <div class="site-wrapper">
      <p>Website Content</p>
      <div class="pusher"></div>
    </div>
    <div class="footer">
      <p>Footer Content</p>
    </div>
  </body>
</html>

View Example

June 20th, 2009 | CSS / HTML

9 Responses to “Sticky CSS Footer”

  1. Ephra (September 8th, 2009 at 6:09 am)

    was looking for this everywhere -to create a ‘dock’-kinda footer; this is the best solution I’ve encountered. Very neat!

    Reply to this Comment
  2. Dario (August 31st, 2009 at 12:45 pm)

    Aaron, it worked great! I have one last question: how do I adjust the margin above the footer in IE? Take a look at this site in both IE and Firefox: http://clientboss.com/clients/123456 (expand the sharing tab). Thanks!

    Reply to this Comment
    • Aaron Gloege (August 31st, 2009 at 2:28 pm)

      Glad it worked!

      The reason the margin is acting weird in IE is because the three items in that hContainer div are floats, and you don’t have a clearing element in there.

      Try adding this after the adContainer div:

      <div style="clear:both"></div>

      That should fix the problem.

      Also, make sure to add the below code to your CSS file. In IE 6, the footer will ‘shutter’ every time you scroll, and by adding a background image to html and body, it will prevent it from doing that.

      * html,* html body {
      background-image:url(about:blank);
      background-attachment:fixed;
      }

      Let know if that fixes the margin issue.

      Reply to this Comment
  3. Dario (August 28th, 2009 at 3:41 pm)

    Getting a 100% width seems to be pretty simple. Would you happen to know how to make, say a 950px fixed centered footer? Now, that’s a tricky one!

    Reply to this Comment
  4. LnddMiles (July 21st, 2009 at 9:01 pm)

    Pretty cool post. I just stumbled upon your blog and wanted to say that I have really liked reading your blog posts. Anyway I’ll be subscribing to your blog and I hope you post again soon!

    Reply to this Comment
  5. Steve (July 14th, 2009 at 4:40 pm)

    Great post! I’ll subscribe right now with my feedreader software!

    Reply to this Comment

Leave a Reply

Name:
Email:
Website:
Message:
SUBMIT