CSS – Sticky Footer

Sticky Footer ExplanationAlmost all websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div>
    <div class="footer">
      Your footer content goes in here
    </div>
  </body>
</html>

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. "!important" is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

Update: A common problem that I’ve seen people run into when implementing this sticky footer is having trouble making your wrapper div take up a defined amount of space in the browser’s eyes. Floating (as discussed above), or the CSS display property help the browser know how big a div physically is. If the browser can’t figure that out, then the footer won’t align to the bottom correctly. Either add a float to a div immediately inside the wrapper, or add "display: inline-block;" as a style definition to the wrapper div.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.

33 Responses to “CSS – Sticky Footer”

  1. Bill says:

    You are an amazing human. I spent so much time trying to make Fait’s code work in Firefox. This worked perfectly. Thanks!

  2. Lawrence Dionisio says:

    I have a question on using this with php actually.

    how will you use this using include header and footer? any solution? 😀

    thanks a bunch!

  3. David says:

    Thanks for the question Lawrence. All that a php include does is transfer content straight from the included file into the file that calls it. The best way to work with php includes (for a header and footer) is to create one entire page and then split it up into the page that changes, plus the header and footer template files.

    To put it more simply regarding the example code written above, you could put everything up to and including the opening wrapper div tag in the header template file. Then put everything starting from and including the closing wrapper div tag into the footer template file.

    I hope that helped!

  4. Lawrence Dionisio says:

    Hi Dave,

    Aside from the sample i gave you via email. I have another one using the code you use. The PHP files that i wanted works all right this time.

    Thanks mate!

  5. David says:

    I was helping someone implement this sticky footer and I actually found a minor bug which I thought I should point out. The sticky footer works, but the bug appears if you apply a background to your wrapper div. Because of the height definitions, and an absence of a float definition, the wrapper background will not appear beyond the user’s screen size. To fix this, add a float: left definition to your wrapper (or, if you are using the centered wrapper described above, create a new div that starts just inside your wrapper and closes just before your nudge div and give that both the float and background properties. That should solve that apparent problem.

    This was actually only a bug in Firefox, go figure. That’s probably the only firefox issue I’ve ever come upon!

  6. Donna says:

    Thank you so much, finally my tweaks to my site work, thanks to your simple coding, now to change over 200 pages, eek.

  7. Joe says:

    David,
    Thanks for your wonderful site. It’s a wealth of information. I’m working on implementing this sticky footer into my site and having a small problem. With the code you show above, you actually are putting the footer outside the wrapper div. My site is centered and this code throws the footer to the left of the screen. How can you get it centered?

  8. Jimmy says:

    Thank you so much!

  9. Joe says:

    Hey! Does this Sticky Footer work with content outside of the “wrapper” div?

    • David says:

      It depends on how elements outside the wrapper div are positioned. If you use fixed or absolute positioned elements then they won’t take up space that the wrapper and footer div are expecting to use, but if you use static or relative positioning, then they will take up space, offsetting the allotted space for the sticky footer. If you have more specifics, I’d be happy to make some suggestions, but in general, I’d try to keep it inside the wrapper or use absolute/fixed positioning.

  10. Joe says:

    Thanks David!

    I’m going to try some things out and see how it ends up working.

  11. Joe says:

    I got it working – the only thing not working as it should is that when there is not enough content the footer sticky, but you have to scroll down in order to see it!

    Any suggestion?

  12. Steve says:

    Same here Joe. I got it working but i need to scroll down a bit to see the footer if thers not enough content to push it down. Is there something i missed?

  13. Lydie says:

    I used your solution on my website. The footer sticks to the bottom alright but there is a problem: When I resize the window (make the height smaller) the footer floats over/under the content. Seems like it doesn’t spot what is in the wrapper. I included the url. Could you please take a look at my code? Thanx for all the help.

    • David says:

      The problem is definitely arising from your absolutely positioned content within your wrapper div. When content is absolutely positioned, a parent div can’t actually figure out how big it is supposed to be to contain those elements. That means that the div.container, header elements that take up a certain amount of space aren’t being accounted for in the height of the wrapper div. I’d either try to not use positioning and instead use floating in your layout, or wrap your absolutely positioned content in a div that has an explicit height.

      If you have any other problems, reply or email.

  14. Lydie says:

    Thanx a lot for the help. I made all divs relative (except one, i placed outside the wrapper div) and now it works in all browsers except Chrome. There the footer still floats onder the content. Any ideas how to solve this problem in Chrome? Again, thanx a lot for the help.

    • David says:

      Hmmm, I just checked and I don’t see any problems in Chrome (Mac v14.0). Did you try something else to fix it? I’m trying to think what would cause the problem in Chrome specifically and I can’t think of anything off hand. If the problem persists, let me know what version of Chrome you are using and if you are on a PC or Mac. Good luck.

  15. Lydie says:

    David, thanx a lot again. I managed to fix the problem in chrome myself. It works like a charm!

  16. Rishi says:

    Hi david,
    Looking at comments you seems to have a flawless solution but my luck is not favoring and this is not working for me.
    I am trying to test this code on Mac Pro Os 10.6.7 and browser is 16.0.912.63

    When i click you example page it opens but when i click expand content is does nothing and i created an html and css file on my local machine and tried it also failed.

    your help will be appreciated.

    • David says:

      Hi Rishi. You actually pointed out a bug on my site, which was causing JQuery to fail, thus why that link you clicked wasn’t working. However, the sticky footer doesn’t rely on any javascript and after fixing the JQuery bug, I tested the sticky footer in both Chrome and Safari (my Chrome version is identical to yours). Everything appears to be working just fine for me, so I’m not sure what to tell you other than give it another go…

  17. Carl Sarelius says:

    Hi David,

    sorry to say this but it doesn’t seem to be working for in IE9. I’ve been reading this page and your other example and neither of them work. Any ideas? I have IE9 on Windows 7.

    Thanks

    • David says:

      Hi Carl,
      I have tested this sticky footer implementation in IE9 on several ocassions, and just rechecked it with your comment to be sure. I didn’t see any problems (was also on Windows 7). Maybe if you can point the way to your specific implementation I can take a look.

  18. sean says:

    Hi there & thanks,
    This seems to fix an annoying & erratic problem with FF, where on occasion, a gap would persist below the footer using similar SF versions – I’m guessing this is fixed due to using ‘nudge’ though I’m not entirely sure why!?

    • David says:

      The problem you were facing was most likely a default padding or margin on either the html, body, or form tags which some browsers include automatically. I’ve seen that problem many times even unrelated to he sticky footer itself. Glad it helped though!

  19. Miztah says:

    Hi David , I’ve been looking for a working solution since a very very long time. I just want to thank you for your solution it works like a charm!

  20. Mel says:

    YES! I tried a billion other solutions and they all screwed up my other code but this one actually worked! Thank you 🙂

  21. Amy says:

    Closest thing I’ve come to a perfect solution. I’m having the same problem Lydie had a year ago – when I resize my window so that it’s smaller than the content, I lose it behind the footer and am unable to scroll it (even though I have overflow on auto). Nothing on my page is positioned absolutely. It’s all relative and it seems like I’ve done it correctly.

    • David says:

      Hi Amy,
      Sorry for the delayed reply. It is hard to diagnose the problem without looking at your implementation. If you share a link I’d be happy to take a look. My first thought would be a float issue. Whenever I’ve seen these problems it is because the browser can’t figure out the height of your wrapper div properly, thus incorrectly positioning the footer div. Many things can cause this, including absolute positioning as was the case for Lydie, or for you, possibly needing a float or “display: block” on your div to force the browser to recognize it’s size.

  22. Arel says:

    Thank you!!! This worked perfect!!!

  23. Lish says:

    Hi David,

    Thanks for your explanation above. I’ve almost got my sticky footer working. I have a content div (with a background image) that I want to extend to the top of the footer at all times. I have a page with little writeup so the div only extends to the height of writeup.

    When I use height:100% the div extends past the footer as I have a header above it. How do I get around this? I want the content area to be 100% browser height but remain between the header and footer.

    Thanks!

    • David says:

      I might place the footer above the main content div using a z-index and then specify the background of the footer wrapper to prevent the background of the main content div from showing through. This could solve your problem if I understand it correctly. If not, please share your code.

  24. Vishmay Patel says:

    I was looking for something like this. Really good tutorial.