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.

Comments (220) Trackbacks (0)
  1. When Andi made her pick, she was all smiles — but on the ‘After the Final Rose’ special, things took an ugly turn.

  2. Nice post. I find out some thing a lot more difficult on distinctive blogs everyday. It’ll constantly be stimulating to read content from other writers and practice somewhat some thing from their store. I’d prefer to use some with the content on my weblog regardless of whether you don’t mind. Natually I’ll give you a link on your internet weblog. Thanks for sharing.
    buy jordans http://www.shoutoutny.com/profiles/blogs/rapid-leveling-on-cityville-game

  3. You will discover some intriguing points in time in this write-up but I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I appear into it further. Wonderful write-up , thanks and we want alot more! Added to FeedBurner as well
    cheap jordans http://airjordanszts.do.pe/2014/01/26/growing-of-nike-shoes-show-the-satisfied-service-which-nike-bring-to-customers/

  4. Just ѡant to say you article іs as surprising. Thе claarity iin yоur post is
    juѕt nice and і could assume you aгe an expert on this subject.
    Fine ѡith ƴoսr permission аllow me tto grab ƴоur fwed
    to kеep updated wіth forthcoming post. Thɑnks a millіon and ƿlease carry
    on the enjoyable աork.

  5. You have made some good points there. I checked on the
    net for more info about the issue and found most individuals
    will go along with your views on this site.

  6. You’re so cool! I don’t think I have read
    through a single thing like this before. So
    good to find someone with original thoughts on this subject.
    Really.. thanks for starting this up. This site is one thing that is needed
    on the internet, someone with a little originality!

  7. 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

  8. 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.

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

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

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

  11. Nice James Dean

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

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

  14. You Are The Man

  15. Give that man a medal.

  16. This worked perfectly. Thank you so much!

  17. Lovelly

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

  19. 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.

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

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

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

  20. 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.

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

  22. 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!

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

  24. Awesome! Thanks

  25. thank you, fixed my issue :^)

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

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

  28. Great! Thanks a lot!

  29. 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!

  30. thank god for people like you.

  31. Works! :))

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

  33. 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…

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

  35. Works a treat – simple! Thanks

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

  37. Daimn – great ;)

  38. Really sexy solution, thanks man!

  39. 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.

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

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

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

  40. 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!

  41. James Dean indeed.

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

  43. WHat if you don’t the height of the footer

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

  44. Thank you so much mate!!!!

  45. appreciate the Samuel L. Ipsum in the demo ;)

  46. Oh thanks! This is just what i need ;)

  47. works like a charm

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

  49. 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

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

  51. Gr8!.. Thanks for sharing.

  52. Very nice. Thanks!

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

    Thanks..

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

  55. 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?

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

  56. Love you paps! :*

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

  58. Thanks. Really really useful.

  59. this is absolutely wonderful

  60. quality. simple. Win!

  61. 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?

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

  62. 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!

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

      • 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!

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

          • 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!

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

  64. Great! Thanks!

  65. 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!

  66. 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…

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

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

  68. This is great, thanks a lot :)

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

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

  71. 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

  72. 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?

  73. 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! :-)

  74. Thank you so much, it works like a charm !

  75. Genius is what you are Padawan.

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

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

  78. Thank you so much! It works perfectly !

  79. This worked wonderfully!

  80. 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.

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

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

  83. 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!

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

      • 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!

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

  84. 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 ;-)

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

  86. Perfect! Simply perfect. Thanks a lot, mate!

  87. Great sticky footer mystrdat!!!!

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

    jheg

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

  89. 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/

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

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

  90. 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!!

  91. 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?

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

      • 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!

  92. 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.

  93. 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.

  94. You are the best person in the entire world.

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

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

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

  98. 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?

    • 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?

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

        • 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

  99. this is sexy. Thanks!

  100. Thanks a lot! Superb solution.

  101. 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?

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

  102. 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

    • You seem to have forgotten to add a margin to the body. In your case, add margin-bottom: 100px to the body element.

      • Added it to my css and still no change :(

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

          • I moved the positioning, I didn’t even notice that in my header file. Thanks for the help and the original code!

  103. 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!

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

  104. Saw this on stackoverflow. Awesome solution!

  105. 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.

  106. Thanks !

  107. 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.

  108. Amazing. So simple and it works!

  109. Any advice on how to do this with a footer that doesn’t have 100% width?

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

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

  111. awesome ! :) Thanks

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

      • 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

  112. Yay, thanks a ton! ;D

  113. Thank you SO much – I’m working on a project and you might have just saved my life!

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

  115. What’s the purpose of setting the footer height? Won’t the height be determined by what’s inside the footer?

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

  116. I may have to try this out one day.

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

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

  119. This is great! Thank you a lot! No more dirty sticky footers :)

  120. This trick worked great thanks, a lot…

  121. 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

  122. 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?

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

  123. I have looking for this for weeks. Thank you!!!

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

  125. 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.

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

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

  127. You can gracefully degrade in IE7 by adding the following rule

       
       
        footer {
            position: relative;
        }
       

       

    • No need to punish IE8 as well, “lt” would do. Still, this will not work as planned. No grace.

      •  Ooops… I meant what you said. Edited.

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

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

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

  128. Dude.. that is SOOO SEXY!!!

  129. Fan-Effing-Tastic! Spanks a bunch!!!

  130. Nice, simple and clear! Good job! Great tip!

  131. why the racial slurs in the demo?

  132. best ever. clean, simple, works.
    mystrdat, you rock!

  133. Thank you so much :)

  134. Big thanks to you!  Every other sticky footer setup had small issues associated with it, but yours was the only one that worked perfectly.


Leave a comment

Trackbacks are disabled.