And STAY Down! How To Keep Your Footer At The Bottom Of The Page With CSS



A familiar problem for many developers. A stunning design, perfectly crafted in semantic markup and CSS, that looks perfect in every browser… until you have a page without much content on it.

Keeping Footer at the Bottom of the Page with CSS - CSSReset.com

Many people using dummy content on a standard-sized monitor will not notice this issue. Some might even argue that it’s not worth fixing at all… but I think they’re wrong, and just in case you agree, I’m going to show you a simple way to fix it.

The Problem:

In case you didn’t see the graphic above, or didn’t understand, here it is in a nutshell:

When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, if the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath.

Depending on the design, this can look a little amateur, and it’s especially bad on large screens.

I’ve seen many failed attempts to fix this with absolute positioning, where the footer is forcibly positioned at the bottom of the screen – which usually ends up in it either overlapping (hiding) the bottom of the page content, or staying in the same position when the viewport is scrolled (eg. flying up the page when you scroll down) or not being pushed down far enough, or floating at the top of the page.

I’ve even seen people ‘fix’ it with Javascript, finding out the height of the page and pushing the footer down after page load. 8-O

Bad times.

The Solution:

… is suitable for use on almost any HTML/CSS layout, perfectly cross-browser compatible and 100% valid, degrades gracefully, doesn’t rely on any hacks (though one is possible for IE6), and most importantly, is damn easy : )

See The Demo

On long pages, the footer is pushed off the screen, as you’d expect. (Just like a real website!)

Also, it should work just the same on iPhones, iPods and iPads, and any other mobile devices that render CSS, although I haven’t had a chance to check this as of posting. Will update soon.

How Is It Done?

It’s surprisingly simple, really – once you get the hang of it you’ll start doing it automatically. Having said that, I still keep the snippet saved in Coda for easy referencing, as there are a couple things to remember.

Only four <div>s are required for this to work:

The HTML

<body>
	<div id="wrapper">
		<div id="header"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</div>
</body>

The wrapper is a container for all the page content, which is here split into header, content and footer.

You can call these <div>s whatever you like – “wrapper” could be “container”, “content” could be “body”, “header” could even be “masthead”, if you’re into that. The main thing here is that the “wrapper” must be directly inside the <body> element as shown. Everything else is taken care of by the CSS…

The CSS

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	padding:10px;
	background:#5ee;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	background:#ee5;
}

How It Works

The content <div> has a large amount of bottom padding, equal to or greater than the height of the footer, which stretches the wrapper <div>. Other than that, there is nothing unusual about the ‘content’ – fill it with whatever you like. Ditto the ‘header’.

The wrapper <div> is set to position:relative, which allows us to force the footer <div> all the way to the bottom, taking up that extra padding space created by the content <div>’s padding.

Side note: Many people assume that the <html> and <body> elements are always at least the height of the browser (min-height:100%). This is not the case: these elements, just like any other, will shrink to fit the least possible height, meaning that on pages with very little content, they are perhaps only half the height of the viewport. The space below is an empty void – nothing can be styled there or take up space there (apart from the background style of the <html> element, which most browsers recognise as needing to fill the screen.)

What this means is that your footer can never be at the bottom of the browser window unless the <html> and <body> elements are at least 100% in height. Hence the first declaration, which does just that : )

Then we specify that the minimum height of the wrapper element is 100%, which makes sure that even if there is a teensy-small amount of content, the page will be at least that high.

Done deal.

The header and the content can now be as big or as small as they ever dreamt (or should that be ‘dreamed’?) and the footer will always be either at the bottom of the viewport, or at the bottom of the document and off the page!

If you didn’t see it already – here’s the demo.

This also works wonders with pages with sidebars. You can either float the sidebar inside the content <div>, or add the sidebar element after the content <div> and use a clearfloat afterwards.

Three Easy Caveats

  1. It can be a little tricky to try to modify your already-built CSS layout to include this code, since it’s not a simple copy-paste snippet – it’s a structural basis for your whole site. Having said that, as soon as I learnt this simple trick I went back over all my previous work and implemented it, and it only took a few hours (and mild to moderate frustration, the first few times.) Still, this is definitely one of those ‘Prevention Is Better Than Cure’ moments.
  2. Some browsers don’t support the min-height property. In those rare cases, the code will not break – it will just look the same as if you hadn’t implemented this structure. There’s a fix for IE5.5/6 below, but other than that, I’m certainly not going to lose any sleep over it.
  3. This structure requires the height of the footer element to be set explicitly (not ‘auto’) – so it won’t really apply for situations where your footer has a dynamic amount of content and can stretch up or down… if you do have a lot of (static) text in your footer, you can still set the height explicitly, but since some people may be browsing with a larger default text size, you should err on the side of caution and make the height of the footer element slightly larger.

A note on older browsers

Older versions of Internet Explorer (IE 6 & IE 5.5) don’t see the min-height property, but there is a way around it using IE conditional comments.

In those old Microsoft browsers, the normal height property behaves similarly to how we expect min-height to behave (it will stretch to 100% of the viewport’s height, but further if needed). Therefore, if you plan on supporting those browsers, you’ll need to expose a 100% height rule to Internet Explorer only by using IE conditional comments. For that, you’d need to put this code in your header:

<!--[if lt IE 7]>
	<style type="text/css">
		#wrapper { height:100%; }
	</style>
<![endif]-->

Internet Explorer (any versions lower than (“lt” in the comment above) IE7 will pick up and apply this rule, which should make everything OK. Having said that, IE6 support won’t be around forever, so don’t get too hung up on this point.

There you have it – a simple and effective way to keep the footer at the bottom of the page, no matter how little content there is.

100 thoughts on “And STAY Down! How To Keep Your Footer At The Bottom Of The Page With CSSadd yours
  1. Pierre-Luc Ayotte said: #

    awesome ! Thanks for this :) I’m doing websites everyday it will be very useful. School didn’t teach everythin :)

    -> Maybe you should add buttons like “tweetme” or “facebook like”. I would use it !

    Thanks

    • Joss said: #

      Thanks for the support : ) this site is very new, and as soon as I get back from China I’ll be adding a few new articles every week – stay tuned!

      Joss

      • Adil said: #

        Thanks for the great tutorial! keep it up, very helpful.

  2. Ok, let me ask a question that has me stumped: the footer on my blog is part of a bottom section that would have to be made to “stick” to the bottom of the screen altogether (i.e. the whole bottom section, not just the footer, which appears at the bottom of that section). Sound confusing? Check out my search page and you’ll see what I mean.

    I’ve looked into and tried various solutions, but was not able to get any to work (my web skills are admittedly limited). I suspect, perhaps wrongly, that it’s simply not possible with this design. Any ideas for a workable solution?

    • Joss said: #

      Looks like the same issue this post is addressing – it’s possible with any design.

      Try restructuring the page based on the layout posted in the tutorial, and see how that works. You can change most elements but the structure and the basic CSS is important.

      Hope this helps!

      Joss

  3. Thank you, Joss, for your reply. The problem is that the bottom section of my design is of variable height, depending on whether comments are activated, and if so whether there are any or not, if there are, how many, etc. All that to say that it’s not possible to specify a height for the bottom section.

    For that reason, it seems that this solution won’t work. Am I missing something here, or would you say that is the case?

    • Joss said: #

      It’s true, actually, this solution works best with fixed height footers. I’ll have a think about it and let you know if I come up with anything!

  4. If you come up with something, I’d love to hear it. When I chose that particular design for my blog I didn’t know much about WP and my CSS knowledge was pretty limited. By tinkering with both, I managed to get the site to look and function pretty much exactly as I wanted, *except* for this issue of the bottom section, which at one point I decided I was just live with.

    • FPete said: #

      Just a thought – if you have a dynamic-height footer ,you could try using a simple javascript code to check the height? Nobody browses with js off these days, unless they’re developers who forgot to switch it back on…

      or alternatively, just make sure your page always has enough content on it to push it down!!

  5. Daniel said: #

    Hey, I was recently using this code, and having trouble keeping it down with large footers, around 400px… Any ideas on whats going wrong? (and btw, it works on smaller footers, so I have the right code…)

    • Joss said: #

      Hey Daniel – could you post a link to the page? I’ll take a look later when I have a mo!

      Alternatively – if its private/not published – could you give more details?

      Cheers

  6. Philipp said: #

    I found a not-so-funny little problem: if your first element with actual content in the wrapper does have a margin-top but none of its parents (up to but not including the wrapper) got any padding-top – then you always get a little additional vertical scrolling (even if there would be no need for any scrolling).

    You can test this on your demo by removing “margin:0″ from h1 and “padding:10px” from #header. Works (at least) in newest Firefox and Chrome releases.

    If you got any other solution than just always adding at least padding-top:1px to div.wrapper > *:first-child let me know…
    Btw: there is no need to specify height on the footer – just make sure .content’s padding-bottom is always large enough.

    • Joss said: #

      Hey Phil, thanks for your comment.

      What you’ve described is actually a limitation in a lot of layouts – by removing the h1 { margin:0 }, H1 defaults to its user-agent stylesheet value (in my case, margin-top: 25px;) – and having a top margin on an element at the top of the page sometimes pushes everything else down, including the wrapper. I’ve had that on lots of projects, and my workaround is to use padding-top instead of margin-top where possible. Normally that’s fine and expected behaviour, but in this case because we’ve set min-height:100%, it creates that extra scrolling.

      In any case I don’t think this is a massive issue – just use padding-top on the first element inside the wrapper, instead of margin-top, and you’re away.

  7. Wow, that is amazingly simple! I can’t tell you how many times I’ve been frustrated with the footer of my pages floating in the middle of browser window. I’m definitely going to give this a try. Thanks and keep up the good work!

  8. Pingback: Keep Your Footer At The Bottom Of The Page | Div Tags

  9. Charlie said: #

    Hey everyone,

    Ive been trying to get my footer to stay at the bottom outside the wrapper and this works perfectly!

    ***My only problem now is as well as having a main content section i would like a sub section and when trying to implement this (using the template code above) it doesnt seem to work! Any Suggestions? Thanks :)

    A

  10. Thanks for this. It is a very helpful tutorial and written out well enough that beginners can understand it too. cheers :)

  11. Trooper said: #

    Thanks for this! Works for me in FF4, Chrome, Opera and IE (dont know which version sorry!)

    Cheers :)

  12. very well done! works in all the browser i care about (ie7+, FF, Chrome, Safari)

    Cheers!

  13. I’m getting a scrollbar even though the page doesn’t need it. I’m having a hard time trying to fix this. Any thoughts?

    • jeremy said: #

      me too :( did you figure it out?

      my footer appears to be going below the page – so you always have to scroll to it, even if you zoom out to the moon

  14. Harry said: #

    This was about the fourth “sticky footer” post I found, and the only one which I managed to get working without changing already existing content on the page – incidentally, also the least complicated! Thank you very much.

  15. Hello, Neat post. There is an issue with your site in web explorer, may check this? IE still is the marketplace leader and a big part of people will pass over your excellent writing because of this problem.

  16. Grammar said: #

    Thank you – this was massively helpful!

  17. Pingback: CSS sticky footer | Hi, I'm Liu Ling.

  18. Lecan said: #

    Exactly what i wanted !!! Thank you very much !!!!!

  19. Dude! This website is awesome! How can I make it look this good !

  20. Pingback: Keep the footer at the bottom of the page! | Intuitive Craft

  21. Douglas said: #

    Thank you very much for sharing such an easy way to do it!

  22. Roger said: #

    Thank you!
    I left the IT industry about 7 years ago and am trying to remember it all again. I have spent nearly two days trying to get this to work, and all I needed was three lines of code.

  23. Rishi Agrawal said: #

    I tried so many solutions, but nothing was working perfectly.
    But this solution is pretty clean and easy to understand.

    You really helped me lot.

  24. Thanks so much. I’m setting up a new site and requiring this to work. Your explanation is simple and easy to understand.

  25. Suku said: #

    It’s really helpful ….. Thanks for the post…

  26. Works great on my site until….I have a 2 coloum site and when the page gets below a certain width, I use media queries to make the coloum collaspe and go under the first coloum. When this happens and I scroll down the footer floats up with the content. I guess because content is dynamically changing, the absolute positioning can not be reloaded……. still, very nice

  27. Tyler said: #

    This is very useful for me. Thanks.

  28. pramod said: #

    oh my god you r genius..

  29. roger said: #

    Using IE8: if I open IE in ‘normal’ rather than ‘maximized’ the footer does not follow the bottom of the browser if I drag it vertically. If I drag it horizontally, the footer will jumped to the bottom.

  30. Mark said: #

    I’m perhaps a little late to the party with this but this is a great tutorial. Had a look through some tutorials to fix this issue which seemed to be a bit more complex than it had to be.

    Thanks for this, worked fine, No faffing about either!

  31. Sam said: #

    I’ve been following your tutorial and can’t seem to make the footer drop down, i’ve followed what you put and tweaked it for my site but the footer just stays in one point???

  32. Mat said: #

    Cheers mate, you’re the man

  33. Gruber said: #

    Hey there!
    your post really helped me out, and even more i guess i can share a little enhancement to your clever technique, the setup is totally the same but one thing:
    instead of giving “bottom: 0;” to the element you want to stick to the botttom, i set a value of “top: 100%;”.
    This will put the element always below the whole height of your wrapping element, and give you the chance to set the bottom padding for the controlling element as a minimum distance to mantain rather than a fixed height/space to use.
    I found this aproach quite usefull with responsive design; as an example something like a footer can contain other elements that could make it stretch in height to fit the whole content when in narrow widths, so it could be difficult to “guess” the correct padding value to make all things to fit correctly.
    Hope this can help, cheers!

    • Karan said: #

      Hey i was about to alert the author about the issue, but you resolved it. Thnx mate!
      @author: thnx for the solution. You saved me from the needless and less effective jquery code. cheers!

  34. Mitchell said: #

    So, I’m just starting HTML so maybe what I’m doing isn’t very good syntax on a large page but the way I’ve been doing it is much simpler.
    I simply put all of my main content in one large , that spans everything within the element EXCEPT my footer which goes underneath all of those elements. Then, in CSS I put in div#main {min-height: 900px;}, or whatever height is enough to make sure that the footer will always remain on the bottom of the screen and will simply fill the bottom of my main div with white space. Like I said though, I’ve only done small stuff so this may not be apllicable to larger, more complex sites.

  35. Stephen said: #

    Awesome! Thanks for the help!

    • mitali said: #

      ya ihave the same problem have you any solution for that?

  36. Herbert said: #

    Doesn’t work if your content div has a background colour/image, the padding-bottom gives you ugly empty space below the content.

    • Mario said: #

      That is exactly the same problem that i have. This is a great sniplet, but when i try to set a background color for the body (or repeating image) it wont fill the whole site between header and footer. Is there a solution for that?

  37. If you’re having issues making it work, you might try adding in html{height:100%}

  38. David Reynolds said: #

    Hi,
    I’m a blind web developer, and tend to build most pages/css in notepad. Just pre production, I get a sighted person to look at the site. I’ve just had a comment back about just this thing. Very many thanks. It is now in my template. Keep it coming!

  39. alana said: #

    Thanks! Just what I’ve been looking for my whole life!

  40. Audrey said: #

    Thanks alot for the detailed post–I had been struggling with this for ages. You are awesome!

  41. Dr Sarger said: #

    I want to make a scroll on the blah blah text. i dont want the footer to disapear . i want the footer to be always visible
    .P.S Forgive my english .

  42. Juraj said: #

    Thanks a lot. I have been searching for this for a few hours and finally i have got it :)

  43. Robert said: #

    Thank you so much for this. I looked at several other sticky-footers, but this one actually worked for my site.

  44. savin said: #

    the above code is not working!!!!!!!!!!

  45. Stephen Thomson said: #

    I’m having an issue only on mobile, where the footer section is being pushed up above the main content slightly and I can’t seem to get it to position correctly…it’s on this page;

    http://abbyoliveira.hostei.com/apocalips.html

    Can anyone help?

  46. angelee said: #

    gee,thanks! very helpful article :)

  47. DavidTheSlayer said: #

    Alex is right, just adding html{height:100%} just after the /*structure*/ comment in the style.css worked for me. Although I tried following Joss’s tutorial as best I could, that void at the bottom would not disappear. Don’t forget that because WordPress (3.2?) uses HTML 5, Eric Myer’s CSS reset pretty much all elements is applied. I think as my theme is based off the default, this could be the reason why others like myself get the void at the bottom.

  48. Flo said: #

    I tried many solutions found online, this one really works.

  49. Maksim said: #

    Man, thanks! Appreciate the help!

  50. liz said: #

    Hi, Many thanks for this. This is exactly what I’m needing. I have a slight issue though, inside my content div, I have 2 more divs – and one of them contains a recordset, with repeating region. My footer does not move up and down, in accordance with how many records are returned. Any ideas on this would be great.

  51. Fflanders said: #

    I’ve done this 3 or 4 times today. The fourth time I finally thought I got it to work and then tried to make the content div an editable area in a template using Dreamweaver. I found that it doesn’t work. Before I try this again, is it possible to do this using a template?

  52. Fflanders said: #

    Also of note, what is the minimum height the footer can be? You have it at 80px. I wanted it at 40px but notice that a scroll bar gets put in and there is white space below the footer. The minimum I can make the footer without a scroll bar is

  53. Fflanders said: #

    Hi,

    I’ve gotten your code to work pretty much, but I have noticed on some of my pages that if I hit ctrl+ to make the page larger, the content spills past the footer. It doesn’t do it on all the pages, just on some of them.

    Here is a link to the page I am working on:
    http://www.dustinhalterphotography.com

    You will see it works on the index and about pages, but on some of the other pages, when you hit ctrl+ it overlaps the footer. You notice it even more on a tablet when you have it in portrait view.

    Any help would be huge. thanks.

  54. Fflanders said: #

    Once again, sorry! I figured it out. If you are using DIVs on your page, and they are nested, the parent DIV cannot have a height of AUTO if the children DIVs are floating left or right.You must set a default height in pixels from what I have found.

  55. Pingback: Week 2 | Sung Stageblog

  56. Victor said: #

    How i can fix my footer down on the bottom . This is my page
    http://dis.ijs.si/projekt-asistent/

    My current solution is this:

    #contentwrap {
    display: block;
    padding: 0 0 20px 0;
    margin: 0 auto;
    position: relative;
    min-height: 450px; // this is the problem, i don’t know exact height for different devices

    but this is not the real solution , because when i run this on mobile phone or tablet or some bigger screen the footer line is no good

  57. Emily said: #

    Accurate and clear direction. And works beautifully. Thank you!

  58. Dan said: #

    I have tried this a couple of times now the footer goes to the bottom of my screen but covers my content, lies on top of it. So you only see a bit of the content and the rest is hidden under the footer. Am I doing something wrong?

  59. thumbs up! works simply and perfectly!! thank you for the post :)

  60. adi said: #

    i have fixed header at the top of the page, so how i can make my footer at the bottom of the page. as in this tutorial. any idea

  61. Damodog said: #

    Top stuff, thanks for this Joss! A fantastic article and a great find. This has totally answered the problem for me and I’ll use this all the time now! :o)

  62. Tom said: #

    Thanks Joss – I had some conflicting code, I went through it against yours and it now works like a charm. Thank you, thank, thank you.

  63. jaishri said: #

    simple and cool solution

  64. JB said: #

    Thank you! All other examples never worked quite right!

  65. Dinom said: #

    How to centralize the footer for width:1024px; margin:0 auto;

  66. This fix in the custom.css section of my client’s WordPress theme worked for me, the footer being 60px high:

    footer
    {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    }

    body
    { padding-bottom:70px; }

    I haven’t tried it for dynamic footer height, perhaps, the body padding-bottom could be dynamically set depending on footer height :-?

  67. Frik said: #

    Hi there, I have no idea how old this thread is (maybe I’m to old to see it), first off love the tutorial,just have one small issue… the footer doesn’t move when there is enough text to warrant a scroll. www dot sleep-n-eat dot com (dont want bots spidering the site as it’s a test domain now)

  68. David Barkoczi said: #

    Save my day (-:
    thx man.

  69. Ivan Lopes said: #

    Well this is insanely amazing! A life savior. Thank you so much!!

  70. Martix said: #

    Thank you, It’s work perfectly. !!!!
    Good job!!

  71. sally said: #

    I just cant make it fix to the bottom. Started over then I couldnt get background colour to display. Any help gratefully appreciated – here it is http://previewyours.co.uk/

    • sally said: #

      Its ok I’ve sussed it – thanks for the solution!

  72. xolisa said: #

    i need this free training and videos for css and html

  73. Pingback: [HTML/CSS] Footer immer ganz unten

  74. daniel said: #

    hi, thank you for this trick , its really help me dude.

    but i really courious how we can put footer like footer in apple.com
    that footer always stink after content.(hidden) so we need to scrol down to look at it.
    is it possible with only html and css?
    thank you for everything

  75. Can I use a background image, as hearder and footer, instaed of the colored “bar”

  76. Ioannis said: #

    Awesome! Thanks for the help!

  77. yes, it works!! but your pages have to have that structure…I was wondering how bad would be use a table to perform same purpose?

  78. Adil said: #

    Hi, loved the article. Keep-up the great work.

Leave a reply
this will never be published
@