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 or use the unknown element shiv (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>

Note: This method will only work for fixed height footers. If you want fluid height, you need JavaScript, flexbox or abuse tables for the job. A very similar table method was suggested by Paul O’Brien in the comments.

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

  • http://www.jb-webs.com/ Martin Ziegert

    I like to experiment with that in my open source website builder at http://www.jb-webs.com – II need that for a special template creation, so thanks for the demo

  • Milford Hensley

    Completely useless if you have information in your footer, (like text, links, icons, etc. that equals enough to expand beyond 100px when on a mobile screen). Just add 4-5 lines of that content text and add it to the footer, and then resize your browser to mobile view. Text will push below the 100px height footer in a hurry.

    • mystrdat

      I guess you mean that the footer cannot have variable height, that’s correct and quite obvious. There is no easy way out of this as of now, we should wait for flexbox. Of course, you could simply change the height and body margin based on media queries to make this work, not very hard.

  • bluestreet

    Two days been looking for a solution for this. Can’t say thank you enough.

  • Steve

    Omg thank you. I was looking everywhere for a SIMPLE solution.

  • Hussain Imtiaz Ali

    Nice James Dean

  • Ian Kerstetter

    This was really useful, and way simpler than all the other solutions I found. Thanks! (I used it at http://www.itkerste.unmelectronicarts.com/ )

  • luke

    Thanks so much! This is super simple compared to all the others.

  • p.k

    You Are The Man

  • aljuk

    Give that man a medal.

  • cloff

    This worked perfectly. Thank you so much!

  • Jaime Lomelin

    Lovelly

  • Marc Esadrian

    Clean, simple, and to the point—and with no *{ margin=0; or extra wrapper mumbo jumbo. I nominate you President of the Internet.

  • bbmatt1

    variable height = oh no, have to do a nasty javascript get height hack.

    Solution?

    Older browsers get no fixed footers, modern browsers use flexbox -
    http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

    It’s the way we should be doing this now.

    • mystrdat

      Flexbox will surely be the way, I can’t object. That is, when we can actually use it.

      • bbmatt1

        We can use it right now for small fixes like sticky footers. If needs be, employ conditional fixes for ie9 and use the old flexbox for ie10 – or just accept that these browsers won’t get sticky footers. (If you can convince your client/boss!)

        The only browsers holding us back with relevant percentage usage are ie8 & 9 and to a lesser extent, ie10. Given that the greater percent of browsers actually support flexbox – chrome & firefox – why hold back because a lesser percentage doesn’t? That makes no sense. Like I said, conditional for older – hell, you can even have conditional JS loading to do a height detect and update classes based on that.

        • mystrdat

          Aside IE, it’s because support in FF and Chrome still differs at this point. Last time I checked flexbox producing different outcomes was some 2 months ago, but I doubt THAT much has changed since. When you add native mobile browsers to the mix and their various versions, it’s outright a no go – not for projects with the average userbase.

  • RW

    This has been a great solution to me. However, when I add content that exceeds the screen height the footer gets pushed to the middle of the screen. The content I added has some absolute positioning, which is not relative to the html. There are floats given the grid setup I use, but they are all cleared. So far I can’t seem to find the way to push it back to the bottom again. Would you have any suggestions?

    Thank You.

  • BL

    This seems simple and all, but it does not work?
    I copy/pasted this code and nothing! What am I doing wrong?

    • mystrdat

      You probably have some extra definitions somewhere – likely height: 100% on html or something like that.

    • Guest

      Same here. HTML tag doesn’t get 100%.

  • Christopher Applegate

    Ran into the 2px below the footer problem in IE10, Simple fix for me was a minor alteration of the css — (position: absolute;) to (position: fixed;) now it is working like a charm!
    Thanks man,
    I have been pulling my hair out trying to get my footer stuck in IE.
    I am guessing your wallet is the one that says badass motherfucker on it!

  • Mike Portanger

    Awesomeee!
    I never searched for this solution.. i was thinking to difficult.

  • 12GA

    Awesome! Thanks

  • espenae93

    thank you, fixed my issue :^)

  • Mohamed

    Works perfectly with Chrome and IE , but I have a Problem With Firefox :/

  • Aaron VIII

    Works perfect, until trying to combine with a snap.js mobile navigation :( Any ideas?

  • Susanne

    Great! Thanks a lot!

  • Justin

    This is perfect. Amazing. I am only having one issue while I am using a css reset. The reset includes “body {line-height:1}” and that is causing my footer to have 1px underneath it of the background, meaning it is as if the footer is up 1px higher than it should be and not at the very very bottom of the page. This only happens in Chrome and Safari, not FF. My current solution is using Rafael’s cross browser selector to have Chrome and Safari bring my footer_wrapper down 1px with margin-bottom: -1px;

    If I am to remove the “body {line-height:1}” in the reset.css the problem goes away in every browser, so I know this is the issue. Amazing work here. See if you can possibly look into this and post/email me back. Thank you!

    • mystrdat

      Sure, can you share the website in question? You can do so privately on mystrdat(at)gmail.com.

  • ant peters

    thank god for people like you.

  • Dαvìd Shαres

    Works! :))

  • elijahpaul

    So so so much simpler than any other css solution I’ve come across. Super thanks goes to you for this.

  • Miloshio

    I’ve tested it with IE tester, added html5shiv.js (mandatory for HTML5 support in old IE’s) guess what: FULLY supported in IE7, partially in IE6 (footer width problem appears here)

    Fantastic. Thanks, I had to break all my code because of boring div#wrap…

  • G-money

    Simple, clean and easy solution. Much better than alternatives.

  • brianf

    Works a treat – simple! Thanks

  • Dennis van Bennekom

    Thank you so much!! Way better then other solutions!

  • Tobi

    Daimn – great ;)

  • Luboš Schrámek

    Really sexy solution, thanks man!

  • Snake

    Head’s up, folks: This footer does NOT work in any version of IE, including the most recent, if you have ANY floated elements in the body. Resizing the window will leave the footer high and dry, overlapping content. This footer is too simplistic for most modern layouts in IE.

    • mystrdat

      Of course it does work. You must clear the floats, as with all floats used anywhere, since they’re out of document flow. In other words, floats don’t automatically expand their parents (which is a must have on body for this footer to work) unless you clear them.

      • Snake

        other browsers effectively “clear” floated elements with your min-height, IE does not. you have to specify with a clear rule. half the comments about IE bugs in this post could be solved with that noted.

        • mystrdat

          The min-height exists on the html element and isn’t inherited by the body. IE does have a slightly different approach to min-height since the beginning of time, but that doesn’t affect this scenario. If you want parents to expand to floated children, you must clear them in the many ways that you can – that’s something you have to do in all browsers. It is more likely that your specific clearing doesn’t work in IE.

  • emilydiane621

    Hey There! I’m getting the weird “float over body” issue in IE8. I changed out the to but that didn’t seem to change anything. I also linked to modernizr.js to see if that would help, nothing. Any ideas on what else I can try? Thanks!

  • rrmonn

    James Dean indeed.

  • Jay B

    Just discovered this elegant solution. Truly excellent! Thank you!

  • Liam O’Neill

    WHat if you don’t the height of the footer

    • mystrdat

      Then you can’t use it in such a simple fashion. You’d have to calculate the needed height with JS and resize both the CSS properties as needed and on the various events you could need (window resize etc.), but it can’t be automated just by pure CSS.

  • Steven

    Thank you so much mate!!!!

  • Butch

    appreciate the Samuel L. Ipsum in the demo ;)

  • Celu

    Oh thanks! This is just what i need ;)

  • Deno

    works like a charm

  • http://richardmisencik.com/ Richard

    For me it only works when there is no scrollbar because of not enough content. Same thing on smaller devices, the footer just floats in the center :)

  • Mupetz

    Thank you! Finally something that works :)
    But still.. I have a tiny space at the bottom. The scroll bar gets activated because of that.
    Is this normal ? Example: http://fishingbb.com/forum/deutsche

  • Marcel

    Very very nice. As a mobile developer. This does work for blackberry Browser. Very well done.!!! I love it

  • rasaiyanramesh

    Gr8!.. Thanks for sharing.

  • Oz

    Very nice. Thanks!

  • http://www.ta3rip.com/ أحمد خطاب

    This is very easy, and can be implemented in seconds over any existing CSS without the need to edit HTML in templates.

    Thanks..

  • Neli

    Awesome! I tested quite a few options that didn’t work 100%. But this one does, thanks!

  • dfg

    gd

  • cesjr02

    Clean and simple. Unfortunately I tested my site in IE10 and pages where I have long content that uses a scroll bar, my footer now floats on top of my content. Much like Keevin’s issue. Was this ever resolved?

    • mystrdat

      I need to see the specific code, from your description it sounds like your body tag is not expanding correctly or some wrapper serves as a position context for the footer instead of the body. I haven’t seen any issues in the demo using IE10.

  • MaleBug

    Love you paps! :*

  • vineet

    great…..searched many website but only your solution worked…thanks

  • Flo_W95

    Thanks. Really really useful.

  • Korede Lawrence Oluwafemi

    this is absolutely wonderful

  • jimxc

    quality. simple. Win!

  • ExplicitWidth

    Hi,

    How one would make the footer expand horizontally if there’s an element with explicit width set. For example, I set the width of article to 1260px and it results in this if I make the window smaller: http://i.imgur.com/2upu2tI.png . Sure I could set the same min-width for the footer, but are there other options?

    • mystrdat

      Sorry for not getting to you earlier. This is how elements naturally behave, they don’t necessarily contain the whole width of a child element and you cannot make that behavior fluid.

      What you can do however, with the same outcome, is to set the explicit width on the parent instead and have the children both expand to 100% width. In your example, instead of setting the width on the article, set it on the body and give your article and the footer element width 100%. If you need to recenter the body, use margin: 0 auto.

      If your specific case is a bit more complicated, you can use an additional parent element to hold both the footer and the article.

  • entityparadigm

    I am using a 16 column grid within the body to align content. This is the link to the grid layout http://grids.heroku.com/grid?column_width=64&column_amount=16&gutter_width=0. The problem is that each grid column has a float which is causing it to not expand with the body and the footer overlaps with the content. Removing floats messes up the content alignment so I don’t wanna do that. Any help would be appreciated. Thanks!

    • mystrdat

      I don’t see the footer implemented in there at all, but since you’re using blank divs to clear the floated content, the body should be expanding correctly. A simple overflow: auto on the .container div would be enough to not require the blank divs and expand the body the same way. In other words, I don’t see the problem since the footer code isn’t there. As a sidenote – that’s a pretty awful grid CSS you’re using, archaic and inflexible. I would venture to suggest you write your own or at least use the one from Foundation or Bootstrap.

      • entityparadigm

        Thanks for the quick reply. I copied your html, body and footer css into another css file that’s why you don’t see it in the file I linked.
        This is the structure of my html file:

        first column
        second column

        sticky footer
        </body

        You suggested using bootstrap or foundation grid system. I plan on keeping the layout fixed and not responsive, do you think this grid system might cause problems? If yes, do you know of any good fixed grid systems? Thank you for the help!

        • mystrdat

          It doesn’t have to be responsive (as in ready for mobile/tablet media queries) to be flexible – it’s more of a question of maintenance. Let’s say you would want to increase the site width by 100px. In your case, you would have to adjust every single grid element, since they are given exact pixel sizes. If it was percentage based, the whole UI would adjust by itself.

          As for suggesting Bootstrap or Foundation, I’ll admit I don’t use grids at all. In my 15 years of front-end development experience I have yet to see a case where it is outright awesome to use (unless the site should look exactly like Bootstrap with all it’s widgets, buttons etc.). Grids tend to be bloated, collide with custom designs and generally a much more minimal and cleaner approach to the problem exists. At the same time, grids don’t address many other common front-end issues you encounter. I have no idea why are they actually as popular as they are.

          If you’re absolutely certain you need a grid, then I would highly suggest a fluid one, if only because of the easier maintenance. If you could link to the html file with the footer implemented, that would be great as I don’t have as much time now to implement it myself, but I could quickly debug the issue in dev tools.

          • entityparadigm

            Both of the techniques you mentioned (i.e. clearing floats or setting overflow to auto) worked. I will look into fluid grids as after reading your comments I realized that using fixed grids will cause problems in the future. Thanks for the help and advice!

  • Andrew Hill

    Beautiful!! So much easier than my previous method:) Thank you.

  • Simon911

    Great! Thanks!

  • Neo Mudaly

    Great piece of code. The only drawback is the fixed height that combined with a responsive layout can add a few complications, otherwise it works!

  • Victor Teixeira

    I really like this sticky footer technique but just found a weird problem… It doesn’t work if you add -webkit-transform: translate3d(0,0,0) to the body tag…

    • mystrdat

      It’s the same as adding position: relative or anything else that establishes a position context, which moves the footer relatively to the parent (body). Solution is simple – don’t do it :) If you need to animate the viewport, animate the whole html tag.

  • MrFakePIE

    Now it leaves an empty space after the footer, help ?

    • nask00s

      check your footer height value on your css file! (the value is larger than your actual footer)

  • Nik

    This is great, thanks a lot :)

  • serkan

    Teşekkürler.O kadar uğraştım yapamadım senin sayende çözdüm sorunu.Artık translate’ten bakarsın ne dediğime :)

  • detters

    Got it… Works like a champ… jeez, what a rad solution

  • detters

    This works great until I scroll the page, then the footer goes up on top of the content, instead of staying fixed at the bottom on scrolling

    • mystrdat

      Then you have something in your code that does not expand the body correctly, I can take a look if you provide a URL.

  • keevin

    HI
    Unfortunately its not working for me as some pages doesn’t have much content http://www.bizonthenet.co.uk/devel/Our_services/design/design.aspx
    However those who have enough content works fine http://www.bizonthenet.co.uk/devel/aboutus/Our_approach.aspx i would really appreciate your comment. Is there something am missing?

    • mystrdat

      I can see it working in both instances, which browser are you using and can you provide a screenshot?

      • keevin

        HI

        I’m using the chrome frame, hence its working fine but chrome frame will shortly be unsupported.

        Please check http://www.bizonthenet.co.uk/devel/aboutus/Our_approach.aspx in IE

        • mystrdat

          Just checked the site in IE8/9/10, looks fine.

          • keevin

            weird, doesn’t look good on IE8, i can’t see how can i upload a print screen here

          • mystrdat

            Try imgur or any other image upload service and post the link.

          • keevin
          • mystrdat

            Thanks for the upload. Not sure what to say, tested again in IE8 and it works normally on my end. What your screenshot shows is a situation where the body would not correctly expand due to floats or elements out of document flow. Does this demo page work in your IE8 well? http://mystrd.at/data/sticky_footer.html

            Actually scratch that, the demo can’t work as is in IE8 since it uses HTML5 tags. I’ll check the page again in virtual WinXP after I get home.

          • keevin

            The yellow footer doesn’t shows up in IE8. However i can see the footer in chrome

          • mystrdat

            My mistake, I edited the answer above.

          • keevin
  • andrakis

    OMG, I cannot believe it’s really working. I tried a many other Sticky footer tutorials in the last 5 days and nothing works. Thanks a lot for this. I’m so happy! :-)

  • Jiří

    Thank you !

  • JaSpeR

    Thank you so much, it works like a charm !

  • Brendon

    Genius is what you are Padawan.

  • John

    This worked great! (Was a very welcome relief after spending 4hrs with other methods to no avail)
    Thank you!

  • Tim Novis

    Absolutely perfect! This is the first sticky footer solution that’s worked first time round with no messy markup changes. Thank you so much!

  • Billy

    Thank you so much! It works perfectly !

  • David

    This worked wonderfully!

  • Ojaybee

    Thanks for this. It’s working well everywhere apart from when I return an sql query with PDO. The last few lines of the table I’ve made overlap into the footer.

    • mystrdat

      That’s probably related to some of your own code. If you share a url, I can help debug the issue. mystrdat@gmail.com if you don’t want to go public.

  • Adam

    Awesome! only sticky footer that I could get to work properly!!!

  • karl

    hi, that piece of css could be the father of chuck norris!! but when hitting ctrl+ + the browser is about adding incountable amounts of whitespace under the footer … how could it be fixed? thanks :)

    • mystrdat

      Hey karl, screenshot or source website?

      • karl

        Hi, it´s Chrome Version 27.0.1453.116 m, in every other browser it works fine as far is I have tested (ff, safari, ie). But maybe there is a correspondency with some chrome plugins which trigger that weird behaviour. Link to IMG: http://postimg.org/image/izcb5n45d/

        • mystrdat

          Sorry for getting back to this late. This is likely related to your code, perhaps something floated that doesn’t extend the body properly. If you give me a url, I can help debug it.

  • Ben

    Works perfectly in Chrome and FF, but in IE it’s just sticking to the bottom of the original screen and blocking some content if you have to scroll down. Any ideas on what it could be? Here’s a page on the site with this problem: http://familylawsoftware.com/fls_new/ca/index.html
    Any help would be appreciated!

    • mystrdat

      Hi. Easy fix would be to remove float: left (which is debatable) and display: inline (which is wrong) from your #content div. The issue is that your body doesn’t expand height at all due to all it’s children being taken out of document flow – eg. floated. While the whole CSS layout of the site you linked is strange, this should at least hotfix the issue in IE.

      • Ben

        Hi, thanks for the response! Unfortunately, this didn’t work…:(

        I agree that the CSS layout is pretty convoluted, I’m just doing the QA and tidying up but I’m considering rewriting some chunks of the style sheets for the site. Thanks for the input though!

        • mystrdat

          It’s not as convoluted as it is badly written (my apologies if that’s your code, I tend to be direct). From what I tested quickly removing the float and inline display worked since it forced the body to finally expand, but I see you’ve made some more modifications that it somehow works in IE now, so I’ll leave the issue there. Good luck with the project in any case.

  • Christina Fuchs

    Thanks a lot. I tried a lot of sticky footer tutorials together with bootstrap. This is the only on which works well. You are the best ;-)

  • Jordan

    You spelled License wrong at the bottom of your post. Hope this goes a long ways ;)

  • Tobi

    Perfect! Simply perfect. Thanks a lot, mate!

  • JasonHegarty

    Great sticky footer mystrdat!!!!

    I linked to you and wrote about it on our forum – thanks again!

    jheg

    • mystrdat

      Thanks, appreciate the mention ;)

  • Mcbadbad

    เย็ดเขร้ สุดยอด

  • Debbie Campbell

    I’ve used this on several sites and it’s always worked perfectly – but I’m having trouble with a new site-in-progress. I need #body-container to stretch to meet the #footer; I’ve tried adding a min-height to it, but it’s not working. What do I need to do? Here’s the site: http://www.redkitecreative.com/dev/kaput/

    • mystrdat

      You’ve uncovered possibly the most negative issue with this layout – the body not stretching to full height as a minimum when you need to use it to scale a background or something else. There’s no easy way out of that, except for using a background for all your content on the body element which would propagate to the full height of html – this would work, although it’s not optimal. I have a more robust fluid layout in the works that uses this footer among other and addresses your issue in a mighty sexy way, but I won’t be releasing it in the short term future, because it’s still broken in many other ways. “When it’s done.” The body background pattern is your best bet.

      • Debbie Campbell

        Thanks for answering, I appreciate it. I’ve used other sticky footer methods in situations like this and will look around, but this is generally my go-to choice now for most sites.

  • Josh

    I spent 6 hours with other CSS tricks and javascripts, none worked very well, this took 2 seconds to add and worked perfectly. Wish I would have found this first!!

  • http://jesus-lebt.com/ Andreas Adler

    Hi James, this is really great. I love the simple markup.

    Now I took your CSS as a base for a three-column test layout where my goal is to keep the markup as simple as possible (avoid wrapper divs if possible).

    This is my current result: http://aquilasoft.org/layout_test.html

    Now I’m far away from being a CSS master so it would be nice if you could take a look at the code and tell me if it’s possible to make the three columns (nav, main and aside) to have 100% height *without* the need of altering the markup?

    Any idea?

    • mystrdat

      Hey, I’ll take a look at it later next week. I already have a real fluid 3 col layout around here somewhere based on this code here, I’ll see if I can dig it up – might as well release it if there’s demand. Though my name is not James. ;)

      • http://jesus-lebt.com/ Andreas Adler

        Oh, sorry. I thought “James Dean” was your real name but it seems it was just a wordplay. My bad, sorry. ;)
        Anyway, thanks for your answer and looking forward to see your three-column layout!

  • http://www.simenschi.com/ Simen Schikulski

    Tip: If you want a margin to the elements above the sticky footer, then add the desired amount from the body margin. Ie. footer height 100px, body margin 120px.

    • mystrdat

      I suppose you mean 120px?

      • http://www.simenschi.com/ Simen Schikulski

        Ups, yes, you’re right :-)

  • Guest

    Nice, thank you sir!

    Tip: If you want a margin to the elements above the sticky footer, then subtract the desired amount from the body margin. Ie. footer height 100px, body margin 80px.

  • William

    You are the best person in the entire world.

  • Vaida

    Omg! It DOES work! Thank u!! After trying so much of everything I am almost crying …

  • Jean

    Aaaaah! Now THAT’s a purist’s work. I owe you a gift next Xmas :-) Thanks for your work.

    • mystrdat

      Oh no, I thank YOU for the kind words.

  • Anders Holm

    Greetings from Copenhagen. Thank you so much. Worked like a charm. :)

  • Rich Lovelock

    This looks nice but………. i’m using Zurb Foundation framework which has position: relative applied to the body. I don’t want to remove it as it’s probably there for a reason but it stops this working (I’m not sure why!?) The fix I found was to put another containing div around everything with position:relative and this seemed to work (similar to this http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/). Any thoughts?

    • mystrdat

      Likely it stops working because the body needs to be only as high as it’s content, it’s required to be fluid and chances are Foundation doesn’t follow that and sets a height: 100% somewhere. I’m afraid that another wrapper won’t fix it in all necessary scenarios as it will not inherit the max-height from your html tag. If you’re using something as heavy as Foundation, you will likely have to resort to it’s own toolset as there’s an awful lot of dependencies I have personally no interest in exploring. Doesn’t “the most advanced responsive front-end framework in the world” have some sort of a sticky footer solution built-in?

      • Rich Lovelock

        Afraid it doesn’t…. can I gauge from your tone you’re not a fan?

        • mystrdat

          Not a fan of pixel based grid systems like bootstrap, but neither a fan of the solutions that foundation is based on (although it is rather flexible future-wise and much cleaner that bootstrap). I find them pointless to use in almost all cases, unnecessarily heavy and prone to deep dependency problems. One could say I’m merely waiting for CSS3 flexbox to wipe them all away.. yet a long wait that proves to be.

          If you have a direct link to where your specific issue can be debugged, I can take a look. Feel free to use my mail if you don’t want to go public. mystrdat@gmail.com

  • 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. :)