4

I've found quite a few places that mention Ryan Fait's technique: http://ryanfait.com/sticky-footer/

And also found this one: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

But they both seem dated and hacky, even if the code does validate. Is there something simpler that works in modern browsers?

bernk
  • 1,155
  • 2
  • 12
  • 22
  • Be worth looking at [how compass does sticky footers](http://compass-style.org/reference/compass/layout/sticky_footer/) – steveax May 16 '13 at 06:27
  • possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – user Mar 28 '14 at 07:35

2 Answers2

1

This is cleaner way of making sticky footer where there is no need for the having additional wrappers and works across all browsers including IE8. 

html {
 position: relative;
 min-height: 100%;
}

body {
 margin: 0 0 110px; /* bottom = footer height + margin of the footer */
}

footer {
 position: absolute;
 left: 0;
 bottom: 0;
 margin-top:10px;
 height: 100px;
 width: 100%;
}
Ninz
  • 349
  • 5
  • 13
0

Easy! Use position:absolute; and bottom:0;

  • 1
    This will just cause the element to be at the bottom of the **viewport**, even if enough content is there to push it to the bottom of the page. OP's asking for something different called normally *sticky footer*. – pzin May 15 '13 at 23:25
  • Nope. The idea is to have the footer at the end of content AND never higher than the bottom of the viewport. Simply positioning it at the bottom will make it always sit at the bottom of the viewport, and cover content if it gets longer than the viewport. Not what I'm after. pzin is right, what I'm after is a sticky footer. – bernk May 16 '13 at 09:24
  • @bernk hmm... not sure. Why don't you want to use Ryan Fait's method? –  May 16 '13 at 15:45
  • I didn't want to use it because it requires a specific html structure, but in the end I think that's what we went with. – bernk May 17 '13 at 11:24