treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Sticky Footer

Last updated on:

CSS:

* { margin:0; padding:0; } 

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

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#footer { 
        position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML:

<div id="wrap">

	<div id="main" class="clearfix">

	</div>

</div>

<div id="footer">

</div>

Reference URL

View Comments

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… http://www.visibilityinherit.com/code/sticky-footer.php

  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. chauhan Hinesh
    Permalink to comment#

    i am work today in microsoft 2008
    and i am creat a web site in this tolds
    so how many command is use full me

    on CSS

  12. Permalink to comment#

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

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

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

  15. Madison
    Permalink to comment#

    Thank you! It worked well on my project website.

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

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

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

  19. Some guy
    Permalink to comment#

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

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

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

  22. Permalink to comment#

    i like! works great!
    Thanks.

    George

  23. Permalink to comment#

    Really like this one!

  24. Permalink to comment#

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

  25. Permalink to comment#

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

  26. Permalink to comment#

    Great tutorial – thanks!

  27. Permalink to comment#

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

    Looks promising. Anyone tested this?

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

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

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

  31. Chris
    Permalink to comment#

    Thanks for this solution! My footer was pretty stubborn.

  32. É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!!

  33. It worked! Thanks for the trick :)

  34. Permalink to comment#

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

  35. Ale
    Permalink to comment#

    It would be great have a demo, thx!

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

  37. Permalink to comment#

    Thanks this was a big help!

  38. Permalink to comment#

    I appreciate the help.

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

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

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

Leave a Comment

Use markdown or basic HTML and be nice.