Making footer stick to the bottom of the page

Problem for today, had a background which was applied on body which meant that the background titled all the way to the length of the document. The page had a footer which would appear where the content would end, which would make the background appear below the footer and make it look like something had gone wrong there.

Footer appearing where the the content would end.

Obviously a comment problem for people who wants to have a coloured footer and a fancy background. So here’s the solution I applied, after looking at the solutions available.

The markup.

The CSS

Here’s what it looks like.
Example of footer sticking to the bottom of the page.

A relatively straightforward solution, the only slight problem with this is that you would require to know the height of the footer well in advance which means you cant have dynamic content for the footer. If I come across a problem like that and have to figure out a solution for that, I shall post it here.

Credits: http://www.themaninblue.com/writing/perspective/2005/08/29/

Note: Following a comment on stumble upon, I just wanted to ensure that the credit link from the “Blue Man” is actually there to ensure to give the credit where its due, this blog post is just a note to self so that when i encounter a similar problem i can look back at it or anyone else who has had a similar problem can look at back at it. I am not taking any credit for this solution, infact I think this idea has a flaw in the sense that if you dont know what the height of the footer is going to be , this might not work as expected

26 thoughts on “Making footer stick to the bottom of the page

  1. ths

    Is there a way to make the footer div always be at the bottom of the page, regardless of where the content is? so if i scrolled up, through content the footer will still be there and the content div would just go behind it?

    Reply
  2. rp Post author

    @ths I guess just use absolute positioning then and specify a z-index, though not sure how useful that is going to be.

    Reply
  3. Cade

    My footer is inside my container divs and when I pulled them out, and tried this, I was not as successful. Cn your solution be modified to work if the footer is in the main container as well?

    Reply
  4. rp Post author

    thanks, but I was looking for an idea for having it working for any height of the footer, the current solution only caters for when you know what height is your footer going to be off.

    but surprisingly ever since I have posted it, the amount of times i have had to use it recently.

    Reply
  5. Chris Peterson

    A very simple solution that just almost works perfectly.

    The problem with it is that the window assumes there is more content to come and the scrollbar is always there even if there is enough space for all the content to fit. You can see the issue in the screenshot you took, there is enough space but the scrollbar is still there. I don’t know about you but if you don’t have to scroll then the scrollbar should not be there.

    Reply
    1. rp Post author

      @Chris, that based on the height you set for the footer, i suppose, i quickly took the screenshot but obviously yes it can be tweaked further to make it pixel perfect.

      Reply
  6. Sam

    Sorry but this is useless.

    I had a gallery and i wanted to add a footer at the bottom.

    The whole thing went mishmash and messed up the entire page layout.

    Reply
  7. rp Post author

    @sam, sorry man! worth checking your markup against a validator. the css works fine and obviously it wont/might not work for you out of the box.

    Reply
  8. Joey

    does this work if the #content is positioned absolutely? I can’t seem to get it to work correctly. On the site I’m using this for, I have a main wrapper (relative) header (absolute) content (absolute) and footer (relative, outside the main wrapper) yet it still seems that the footer is unaffected by this. Any ideas?

    Reply
  9. Giacomo

    Great tutorial! Thank’s a lot: I’ve been tying to solve the sticky-footer problem since two days, but no result.
    Your solution works fine.

    Reply
  10. BILLYBOY

    I had the same problem as chris, the scrollbar wouldn’t get out even tweaking all the footer measures… I finally zeroed the container border and all works like a charm!!!!
    THANK YOU!!!

    Reply
  11. Pingback: Make the Footer Stick to the Bottom of a Page « My Graphic Friend's blog

  12. UXDesigner

    I’ve tried this, but when I resize the window and I scroll down, the footer overlaps the content and stays in a fixed position.

    Reply
  13. Richard

    Thanks mate, of all the solutions on net, this seems to be straightforward and effective so far for me.
    Cheers.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">