Grow your CSS skills. Land your dream job.

Last updated on:

Sticky Footer

Works great if you can apply a fixed height to the footer.

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
Check out this Pen!

Comments

  1. Note that this clearfix is the only one with a dot (content: “.”;) instead of a space like in the “Force Element To Self-Clear it’s Children” snippet.

  2. Permalink to comment#

    Very neat, I’ll test this in my code.

  3. martin
    Permalink to comment#

    Note that setting html {height:100%} causes a bug where a bottom-aligned body background image will fail to attach to the real bottom of the body.

    Instead it will attach to the bottom of the viewport and scroll up showing ugly space underneath.

    The solution is to apply your background to an inner element or maybe your design will work with background-attachment:fixed instead.

  4. Permalink to comment#

    Another brilliant bit of code from you Chris, thanks

  5. chad
    Permalink to comment#

    Note, that sticky footer falls short in Opera and IE8. Open the page in each, have your browser window halfway open, now drag the window down, now see that the footer does not follow. This one works in all…

  6. darko

    What is the code that you used for the main menu of snippets?

    CSS
    HTML
    HTAccess
    Etc.

  7. A demo would have been better.

  8. Permalink to comment#

    I am trying to remove the footer of my WordPress.com blog, and was wondering if there was anyway to do so without having to purchase the css upgrade, and if so what the code’s would be. I am new to the whole wordpress thing, and know little to nothing about coding. Please help!

    • Tay

      remove the php call to get the footer?

      Remove this line at the bottom of your index.php or pages.php (et al).

    • Tay

      PHP not showing.

      Here it is again. Removed the “” at the end.

      ?php get_footer(); ?

  9. what the heck is this for :

    body (&rt;'s) #wrap {height: auto; min-height: 100%;}

  10. chauhan Hinesh
    Permalink to comment#

    I am used THIS tricks on my project web site so is very use full me this tricks

    I am a B.C.A. Student in gujarat FROM india

    Thanks CSS-tricks

  11. Permalink to comment#

    I’ve been using something like this for years.
    Is there a better way to do this now with css3?

  12. this is what i’m looking for.. thanx

  13. fabio
    Permalink to comment#

    hi,
    thank you for the code,but I’ve got a problem with firefox (mac-osx).
    Does anybody have the same problem??

    • fabio
      Permalink to comment#

      OPS! I was wrong… there was a comment in html code that disturb in firefox, I’ve deleted it, now it’s ok.
      Thank you indeed, great article!!

  14. Madison
    Permalink to comment#

    Thank you! It worked well on my project website.

  15. Great snippet. I will be using this all the time.
    But I had a problem of large background images on the body disappearing further down the page once you scrolled.
    Solution:
    add overflow: auto to the second line in the CSS.

    html, body, #wrap {
    height: 100%;
    overflow: auto;
    }

    • Adamo Maisano
      Permalink to comment#

      @Michael Ware: That works great! I had a basic sticky-footer setup, a repeating bg-image in the <HTML> element, and a fixed bg-image in my <BODY> element. I was having the same issue/bug where the <BODY> bg-image cut-off at the browser viewport bottom. Adding “overflow: auto” to the <BODY> element fixed this bug, but do you know if it works (and doesn’t cause other problems) on other browsers?

    • Hugo Mosh
      Permalink to comment#

      Works perfect with the overflow, for me. Gracias

  16. Samuel Bernet
    Permalink to comment#

    Great Post! but…
    I tried to implement it on my own website, but it seems that the negative margin value isn’t working for me. Althoug the content isnt very high.
    It positions my footer exactly “by the height of my footer” below the viewport.

    Could anyone help me out. It would be greatly appreciated!

    Cheers Sam

  17. The simplest and most compatible sticky footer I know of is Ryan Fait’s Sticky Footer. It’s been a long time since I ran across it, does anyone know if it has any problems? I have yet to run across anything.

    • Caleb Jones

      That’s the same as the one here, except that this one uses a pseudo-element instead of requiring you to add something.push to your markup.

  18. Some guy
    Permalink to comment#

    Most of sites don’t ever need sticky footer, because all pages are taller than one screen. Always.

  19. Hi guys,

    I’ve tried to glue a megamenu into the header without any success, it seems to break the ability for the footer to float correctly anymore… Any Suggestions?

  20. Permalink to comment#

    Hi Guys,

    How would I get this to work in HTML5, wouldn’t this conflict with the CSS in the boilerplate? or would I just put the code in the authors section?

    • Permalink to comment#

      I’ve answered my own question… Genius, the guy’s have thought of everything, I take my hat off to Paul Irish and the rest of the team.

  21. Permalink to comment#

    Really like this one!

  22. Permalink to comment#

    I’m not pretty sure, but I think that
    #wrap should have margin-bottom with value of #footer height :S

  23. Permalink to comment#

    Thanks, but I’m having issues in Firefox with this Snippet :/

  24. Permalink to comment#

    Variable height sticky footer: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

    Looks promising. Anyone tested this?

    • Brady
      Permalink to comment#

      I’m testing it, with more or less a layout like this:
      pseudocode:

      body - column, min-height=100vh
        paper - flex 1
        footer
        (sticky footer)
      
      paper
        narrow
      
      narrow - column
        header
        contentetcetera
      
      contentetcetera - row
        content - 60%
        bloglist - 40%
      

      Probably not the best layout, but hopefully enough to get me started. Also, have to consider how to at least get it looking OK in the recent ie10, for instance, using this chart of who’s supporting CSS Flexbox: http://caniuse.com/flexbox

  25. This is awesome, definitely a simplified version of what Matthew James Taylor came up with. Thanks for sharing.

  26. Logan
    Permalink to comment#

    Hey, I’m getting a bug with this method in google chrome (windows), although it could just be my computer. When I resize the window until a scrollbar shows, refresh the page, and then maximize, the footer jumps to the base of the content. This bug is showing on cssstickyfooter.com, and anywhere else using this method. Any ideas on a fix for this?

  27. I’m sorry, but this didn’t work for me… I had to apply position:fixed and bottom:0 to my footer to let it work, without any of the code put here. However, perhaps it’s ’cause I was trying to use it in DotNetNuke. Works kinda differently with preset styles and such, probably. But hey, this got me going, so thanks anyway ;D

    • Otto
      Permalink to comment#

      Yeah!!! Taarique Debidin you are my man !
      I am using it in quite a complex system and had the same problem.
      Applying position:fixed and bottom:0 to the footer was eventually all I had to do.

  28. Chris
    Permalink to comment#

    Thanks for this solution! My footer was pretty stubborn.

  29. Éderson
    Permalink to comment#

    I am applying the technique of Styck footer on my site, but my content needs to be aligned both horizontally as vertically in the #main. But due to the “botom padding-bottom: 180px” when this must be the same size of the footer, my #main does not line up vertically. If I take off this padding, and put some value at the #main height , this works!, but my footer is not always at the bottom. How should I proceed in this case? I need some help!!

  30. It worked! Thanks for the trick :)

  31. Permalink to comment#

    You should upload demo on your this tutorial, it will helpful.

  32. Ale
    Permalink to comment#

    It would be great have a demo, thx!

  33. Gail
    Permalink to comment#

    If you add box-sizing: border-box; to #main, it will draw the padding-bottom into the height of #main. This solved an issue I had with giving #main a height of 100%.

  34. Permalink to comment#

    Thanks this was a big help!

  35. Permalink to comment#

    I appreciate the help.

  36. Dr.Zen
    Permalink to comment#

    How about James Dean’s sticky footer trick? It’s very neat, no special markup needed. It’s all done with CSS. Check it out: http://mystrd.at/modern-clean-css-sticky-footer

  37. I’m confused as to why you can’t just set the footer to position: fixed? It seems to me that it would be a whole lot easier to accomplish it this way. Does it not work in IE or something?

    • Shaddy
      Permalink to comment#

      Sometimes you need the footer to remain in the flow, for example when dealing with backgrounds on the main section.

  38. Here’s some nice SASS to use with this :)

    // Sticky Footer
    
    $footerHeight: 60px
    
    html, body, #wrap
      height: 100%
    
    body > #wrap
      height: auto
      min-height: 100%
    
    #main
      padding-bottom: $footerHeight
    
    footer
      position: relative
      margin-top: -#{$footerHeight}
      height: $footerHeight
      clear: both
    
  39. Noticed a few people were having a problem with the background not extending beyond the browser window dimensions. After coming across the same problem myself I settled on this fix:

    Change this:

    html, body {
      height: 100%;
    }
    

    To this:

    html {
      height: 100%;
    }
    body {
      height: auto
    }
    
  40. chen

    Hi,
    If .page-wrap has position:relative, links in the footer are “covered” and do not work.
    Any solution for that?

    Thanks

  41. Andrés Guevara
    Permalink to comment#

    This is just GREAT!!! Thanks!!

  42. Jon
    Permalink to comment#

    Why does this break when I have “Position: Relative;” set to the main content Div? My main content div needs to be position relative due to the layout I have. Anyway way to make it work? Thanks!

  43. Courtney D
    Permalink to comment#

    can someone explain the purpose of the Lorum Ipsum JS that is appended to the .page-wrap? Much appreciated. thanks!

    • Courtney D
      Permalink to comment#

      Also, I had issues in IE 8, but I just added a float: left to the footer and that resolved it.

    • etboggs
      Permalink to comment#

      The Lorem Ipsum is only there for the purposes of the demo. Take a look at the results tab.

    • Courtney D
      Permalink to comment#

      Thanks!

  44. Sir i have a small weblog which is completely responsive in design i like everything about it but the thing creating some problem is that the site is not full width and when i try to change its width it looses its responsive behavior to various screen sizes,so i was thinking that could you please have a look at it and help me converting it to full width.
    The other option i was thinking about was to add two sticky sections to the site one at the left and one at the right but i have no idea how to do that(i mean creating sticky sections is easy but how to place them at the desired portion of my site without compromising with the responsiveness is bit difficult) i would be really very thankful to you for your suggestion and help

  45. Permalink to comment#

    Awesome Chris! Thanks for sharing this. I’ve seen it done before, but didn’t really think about implementing it until it came across a mock up. I knew I could hit up your site for the snippet of code that I needed.

  46. Mark L.
    Permalink to comment#

    I thought using

    {margin:0}

    was bad practice…

    • Mark L.
      Permalink to comment#

      The asterisk in my post got dropped. I meant to say that I thought using an asterisk to select all elements on the page to reset the margins to zero was considered bad practice. At least, I read that somewhere.

    • The basis for that thinking is that that selector needs to select all elements on the page and that’s slower than something more specific like an ID selector which only has one match. That’s technically true, but it will not make a perceptible difference in any kind of speed test. Except in truly extreme circumstances. This has largely been true for a decade, so anything we can do to stamp it out this perception would be awesome. Write CSS selectors that work for you and don’t worry about selector performance all that much.

  47. Jon
    Permalink to comment#

    .page-wrap {
    min-height: 100%;
    }
    .page-wrap:after {
    content: “”;
    display: block;
    }

    Just this little piece of code fixed it for me, now not matter how far I zoom my page out my footer is sticking to the bottom of the page, thanks for the help friend :)

  48. chen
    Permalink to comment#

    Hi,

    Used this technique, so now there is a layout with .page-wrap and inside it comes the header, below is the content, and after .page-wrap comes the footer.
    Now there is a page in which i need to center vertically a div in the content area. The width of the div is known but the height is not.
    Is it possible to do it?
    Have tried options of absolute table(css) but without success.

    Thanks

  49. Permalink to comment#

    Thanks,
    works great!

    This is my Sass mixin

    @mixin stickyFooter($footerHeight, $wrapSelector, $footerSelector) {
      html, body {
        height: 100%;
      }
    
      #{$wrapSelector} {
        min-height: 100%; /* equal to footer height */
        margin-bottom: -$footerHeight;
        &:after {
          content: "";
          display: block;
        }
      }
    
      #{$footerSelector}, #{$wrapSelector}:after {
        /* .push must be the same height as footer */
        height: $footerHeight; 
      }
    }
    
  50. Permalink to comment#

    I works great, although I have solved the bottom margin issue just by adding “overflow:hidden” to the footer.

    .site-footer {
      background: orange;
      overflow: hidden;
    }
    
  51. Emilio J. Zimba
    Permalink to comment#

    Great post.
    There is a bug in IE7
    The footer cuts the body content
    Can anybody help?
    Regards!

  52. Jaishri
    Permalink to comment#

    Hi,

    I implemented the above code in my project. But it didnt worked at all.

    the footer is visible in the center of the content.

    Pls help

  53. Permalink to comment#

    This looks a lot like a solution I’ve been using for a while, but a bit more complicated and I’m wondering if I’m missing something. The cons for both are the same: must support min-height (IE8+) and must know footer’s height.

    html {
      height: 100%;
    }
    html, body {
      margin: 0;
      padding: 0;
      border: 0;
    }
    body {
      position: relative;
      min-height: 100%;
      padding-bottom: 142px; // Using footer height from example
      box-sizing: border-box; // Supported by IE8+ as well
    }
    .site-footer {
      position: absolute;
      bottom: 0;
      height: 142px;
    }
    

    I guess this way your .site-footer won’t be automatically 100% wide (simple fix, of course: width: 100%). But … am I missing something else? Here it is on codepen.

    There’s one thing to note in mine, but it (I think) applies to yours as well: with a body (or container) at min-height: 100% and no top padding, if you start with something that has a top-margin or end with something that has a bottom-margin it will extend beyond its parent; that is, if the first thing inside your body is a margined h1, the h1‘s margin will cause the body to essentially have a top-margin, which will mean the page will never be as short as 100% (it’ll be 100% + margin value), and will always scroll. In my codepen example I accounted for this by adding a bit of padding to the top of the body.

    Curious your thoughts, and if I’ve overlooked something that would necessitate the extra containers etc.

    • Ottaz
      Permalink to comment#

      The issue with making the footer’s position fixed or absolute is that it is always visible. So if you have a site where the height differs depending on the page you are on, then the footer doesn’t appear at the bottom of the actual page, but rather the bottom of your browser window.

    • Permalink to comment#

      That’s true of position: fixed, @Ottaz. But not position: absolute – not if the container element (the element with position: relative – in this case, the body) extends beyond the viewable window. Which it does in my example. The position: absolute footer is positioned absolutely to the bottom of the body, which is (and of course should be) at the bottom of the viewable content).

    • Clément Oriol
      Permalink to comment#

      Thanks Ben, this is the best way I’ve found to have a sticky footer.
      Kudos :)

  54. Mike
    Permalink to comment#

    This is fantastic! Thank you very much Chris.

  55. David
    Permalink to comment#

    You reference ‘.push':
    .site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 142px;
    }
    but I see no item with the class-name ‘push.’ Perhaps this is from an earlier version of the article?

  56. Great method indeed. Unfortunately I am having a different situation where, I have a Header above the main content area and a footer below. So I have made a code like this:

    .maincontent {
        padding-bottom: 20px;
        /* Starts -&gt; Making the Footer Sticky */
        min-height: 100%;
        margin-top: -140px; /* equals the height of "Header" */
        padding-top: 140px; /* equals the height of "Header" */
        margin-bottom: -71px; /* equals the height of "Footer" */
        padding-bottom: 71px; /* equals the height of "Footer" */
        /* ENDS -&gt; Making the Footer Sticky */
    }
    

    It seems to be working great. but is it good to use this method?

  57. Thiyagesh

    This does not works correctly when the height of the footer reduces. So this is not the sticky footer.

  58. Jonathan Motes

    If you’re using border-box box sizing (http://css-tricks.com/box-sizing/, supported on IE8+), you can just add bottom padding to counter the bottom-margin on the .page-wrap and remove the code that adds the “push”.

    .page-wrap {
        min-height: 100%;
        /* equal to footer height */
        margin-bottom: -142px;
        padding-bottom: 142px;
    }
    
  59. Permalink to comment#

    Hey Chris. Thanks for this! Working great everywhere except on ONE page.

    Not sure what it is about this single page that has the footer drop off the bottom.

    Anyone see what the isssue might be?

    http://kennlucas.com/contact-thanks.htm

  60. Jonesy

    I know it’s a bit old hat but isn’t it just easier and pretty much bulletproof on any browser to use a table like the old days? Yeah it’s old but it’s also tried and tested. Something like this works exactly as expected: http://jsfiddle.net/L6daa/

  61. sandeep kumar
    Permalink to comment#

    I used this code. working fine with IE8+. is there any hack for IE7. please help

  62. Vlad
    Permalink to comment#

    I like to avoid unnecessary wrappers.

    I set HTML to height:100%, BODY to min-height: 100%, and then add BODY:AFTER to create space for the footer. No wrappers.

  63. Tim
    Permalink to comment#

    Works Great! Thank you so much!!! : )

  64. Permalink to comment#

    I was fucionado correctly, and the amendments made in the comments are very useful.

  65. Jade
    Permalink to comment#

    after using the code, I have a situation where the footer shows a white space on the right?
    any idea?

  66. renato
    Permalink to comment#

    This works well if you are not using normalize.css if you are, the top margins of some elements will offset the footer.
    I have used this method many times, but on my first website using normalize. I ended up switching to James Dean “Sticky Footer” as mentioned in a post before. Does the trick with normalize.

    http://mystrd.at/modern-clean-css-sticky-footer/

  67. morris
    Permalink to comment#

    just realized there is something ‘wrong’ in this example. the example says this:

    /* .push must be the same height as footer */

    but there isn’t a class called push. it should say something like

    /* .page-wrap's margin-bottom must be the same height as footer*/

  68. Beladel Ilyes Abdelrazak
    Permalink to comment#

    Best method so far I have seen, nice work.

  69. This method worked in everything down to IE8 on a site with a complex layout when several other go-to methods did not. This is now a go-to method!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".