Modern Clean CSS “Sticky Footer”

They call him the James Dean of sticky footers, the Sexy Kind, the Genghis Khan footer.

Clean, modern, simple, no hacks needed. Works for IE8+, Chrome, Firefox, Opera.
Does not(!) require any "wrapper" elements because it's being pushed down by the flexible body height.
Far too sexy if you don't need support for vanity browsers. Optionally exchange the HTML5 markup for good old divs (IE8).

Demo here

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Yup, that's it, no questions asked. Here's the sample HTML5.

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

Licence: A comment or a tweet goes a long way.

Jamie C

this is sexy. Thanks!
Niels

Thanks a lot! Superb solution.
Lucy

This worked well for sticking my footer to the bottom of the page, but I can’t seem to get my background texture (an image) to pull down to meet the footer. My background ends about halfway down the page, and then there is a large blank gap between it and the footer. Any suggestions on what may be going wrong?
- mystrdat
  
  Since the body doesn’t expand to 100% page height, but to it’s content height, this can be an issue. However, any time you put a background on the body element, it is projected onto the html element (which in this case is always expanded to full page height) and would therefore expand to the whole page, unless you have some background applied on the html element that would negate this inheritance. This won’t work for divs etc. nested inside the body, only the body element itself behaves this way. I would need to see your specific code to be sure of the exact context. If you don’t want to post a link in public, you can mail me on mystrdat@gmail.com.
  - Lucy
    
    Thank you!! Link sent! :)
  - Lucy
    
    Just wanted to publicly say THANK YOU for helping us with our site, your suggestions worked perfectly and our site looks so much better and more polished with a sticky footer! :) This code is fabulously simple and effective! Amazing work, mystrdat! :)
    - mystrdat
      
      Thanks, appreciate it. ;)
Andrew Wilson

This still only works for me if the page is not longer than the screen height. When I scroll down my footer is overlaying my content
Any help? Please?

Thanks in advance!

Site: http://collecthw.com/hw/id/4
- mystrdat
  
  You seem to have forgotten to add a margin to the body. In your case, add margin-bottom: 100px to the body element.
  - Andrew Wilson
    
    Added it to my css and still no change :(
    - mystrdat
      
      I see. It’s because the bootstrap.css is linked later in the document head than your custom.css and overwrites any margin you use there. Bootstrap’s margin: 0 on body negates your changes. You can either change it in bootstrap, move your custom.css to load later than bootstrap (which you should anyway) or make the rule !important in your css file (which you should not).
      - Andrew Wilson
        
        I moved the positioning, I didn’t even notice that in my header file. Thanks for the help and the original code!
Geri

THANK YOU!!!
http://twitter.com/Thevolone The-Devo

This still only works for me if the page is not longer than the screen height. When I scroll down my footer is overlaying my content
Any help? Please?

Thanks in advance!
- mystrdat
  
  It could be that your html/body elements are set to height: 100% or something else incluences the needed flow. If you give me a link, I could tell you without having to guess.
Eric

Saw this on stackoverflow. Awesome solution!
http://www.facebook.com/john.ag.925 John Ag

Behandling med Sciton IPL er mer behagelig og tryggere enn vanlig IPL på grunn av innebygd kjøling i behandlingshodet. Dette gjør også at vi kan bruke mer energi og gå dypere i behandlingsområdet uten at det fører til skader på huden.www.kolibrimedical.com,vitalhudklinikk.no,cosmedica.no.
Virgil Fabre

Thanks !
Craig Moore

I think I love you. You have no idea how much this was annoying me and then James Dean swags along and lays the solution at my footer. Literally.
Flobin

Amazing. So simple and it works!
Kristen Shirkey

Any advice on how to do this with a footer that doesn’t have 100% width?
- mystrdat
  
  Just change the width to anything you want. If you need to recenter it, put in left: 50% and margin-left: -(1/2 of width)px.
pinklife

You kick ass! So much better than the labyrinthine stickies I was trying.
Hunor

awesome ! :) Thanks
Pau

It doesn’t work for me… http://www.pauperez.es/test/experiencia.html any ideas?
- mystrdat
  
  Remove position: relative from your #wrapper and use margins instead. Also your body margin-bottom is wrong as the footer is higher due to padding. The problem is that you’re killing the document flow by using unnecessary floats without any clearing.
  - Pau
    
    Thanks for taking a look at it and helping. I know I’m a little beginner with CSS, sorry if some things are too obvious. Removing the position:relative placed the footer correctly at the bottom, but no matter what changes I do to the body margin-bottom it still overlaps with the body, I even gave crazy bottom margins and it still treats them as 0, so I don’t know what I’m missing :-S
    - mystrdat
      
      Sorry, I should have probably stated it more explicitly. Also, no issue admitting you’re a beginner – people are not born with CSS experience. Just remove float: left; from article.
      - Pau
        
        Thanks again!
Akanksha

Yay, thanks a ton! ;D
Pau

it ain’t working for me :( http://www.pauperez.es/test/experiencia.html
Ali Shaded

Thank you SO much – I’m working on a project and you might have just saved my life!
- mystrdat
  
  Glad to help, thanks for the kind words.
Javienen Bernal

This is amazing!! so simple yet so powerful, thanks a lot for this elegant solution =D!
Henry

What’s the purpose of setting the footer height? Won’t the height be determined by what’s inside the footer?
- mystrdat
  
  In this scenario, body height is fully dependant on your content height and once it reaches the bottom of a page, it forces a scroll using it’s bottom margin as a bumper. Space reserved by the margin is filled with the footer, so both have to be equal in height.
http://twitter.com/joemcasta Jose Castaneda

I may have to try this out one day.
Shina

This is amazing .. even better than the Bootstrap. I changed the height to “Auto”
Daniel Lucas

shit yeah – this is an amazing bit of code, and some really elegant CSS authoring. great job!
Gérard Mathiuet

This is great! Thank you a lot! No more dirty sticky footers :)
http://posmuara.blogspot.com/ muara fatan

This trick worked great thanks, a lot…
Jake Murphy

thank you so much, other solutions required major reworking of my html and css structure, whereas yours required me to add a few lines to my core css file, thank you!!! :) you have saved me a hell of a lot of time
- mystrdat
  
  Glad to help, thanks for the comment!
http://twitter.com/cranstongivesin Michael Cranston

Wow thanks a lot for this. This is such a better solution that what exists out there — how come all the other solutions require all these extra ugly wrappers?
- mystrdat
  
  It’s rather unorthodox to use the html tag itself for positioning, since there’s this enormously widespread CSS habit of setting html, body {height: 100%;} and building a UI on top of that as a given core, which unfortunately kills the solution here (and many other flexible layout options), but it could have very well just served as an unquestioned showstopper at the time. In any case, using the html tag allows for elimination of the unnecessary wrapper elements and achieve an even greater flexibility thanks to how height is inherited and expanded from the top level. Then there’s the question of old IE support – this solution will not work correctly in IE7 and below since min-height isn’t understood by those browsers as it should be. Luckily, those days are gone. :)
Andrius

I have looking for this for weeks. Thank you!!!
http://twitter.com/joey89924 joey

I hated having to use extra markup to achieve this.
2N4401
Me

Absolute position? It doesn’t work. Resize your window smaller than the content of the page, reload the page, and find the footer covers the content. Only the “traditional” methods work, whether CSS or JavaScript.
- mystrdat
  
  Of course it does work, absolute position isn’t determining to anything when padding is used for expanding the body height. Mind the IE8+ note, not sure what you’re using to display it.
http://twitter.com/redkitedesign Debbie Campbell

This is great, very simple. Thanks so much!
davidgallagher

You can gracefully degrade in IE7 by adding the following rule



    footer {
        position: relative;
    }
- mystrdat
  
  No need to punish IE8 as well, “lt” would do. Still, this will not work as planned. No grace.
  - davidgallagher
    
    Ooops… I meant what you said. Edited.
    - mystrdat
      
      Cool, try the code though. Relative footer will not float at the bottom as desired. Issue is that IE7 doesn’t understand the HTML min-height correctly – it only reaches as far as the visible window area, not below the scrollbar.
      - davidgallagher
        
        I know it doesn’t sit at the bottom, but it should at least sit below the content. I guess it’s not the most graceful degrade, just trying to recover usability by not having the footer sit over the content.
        
        I do really like your solution. I hated having to use extra markup to achieve this.
      - mystrdat
        
        I do see where you’re coming from with that, thanks for the contribution in any case. After all these years of extra CSS for IE5/6, I finally chose to disregard IE7 in my code altogether (since it fell below 5% recently and most being China based). It’s just a hacked-on IE6 core anyway, so many Jurassic problems.
Kevin Sheppard

Dude.. that is SOOO SEXY!!!
http://www.facebook.com/beetham Jason Beetham

Fan-Effing-Tastic! Spanks a bunch!!!
http://twitter.com/nikokolev Nikolay Nedkov Kolev

Nice, simple and clear! Good job! Great tip!
Bob

why the racial slurs in the demo?
- mystrdat
  
  That’s generated from Samuel L. Ipsum, movie quotes.
james dean

best ever. clean, simple, works.
mystrdat, you rock!
Dr Jekyllandme

Thank you so much :)
- mystrdat
  
  Thanks for the comment :)
Charlie S

Big thanks to you! Every other sticky footer setup had small issues associated with it, but yours was the only one that worked perfectly.
- mystrdat
  
  You’re very welcome, glad to help. :)