25

I want the footer to always be at the bottom of the page even if the content doesn't push it all the way down. How can I make it just stay at the bottom of the page?

FrozenMicrowavedPIzza
  • 261
  • 1
  • 3
  • 4
  • possible duplicate of [Make div stay at bottom of page's content all the time even when there are scrollbars](http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) – jgauffin Apr 25 '12 at 11:15
  • 2
    See [CSS Sticky Footer](http://ryanfait.com/sticky-footer/) or [New CSS Sticky Footer](http://www.cssstickyfooter.com/). – ЯegDwight Jan 26 '10 at 16:25
  • New CSS Sticky Footer worked well for me. – Justin Tanner Sep 29 '10 at 21:15

2 Answers2

33
 #footer { position: fixed; bottom: 0; }
Bryan A
  • 3,598
  • 1
  • 23
  • 29
  • Note this is for a footer with ID="footer", to target the footer element omit the # – Ben Taliadoros Oct 24 '16 at 13:20
  • 30
    -1. This does not position the element at the bottom of the page, it positions it at the bottom of the screen. Those are very different requests. – endemic Oct 11 '17 at 01:03
2

If you always want it to be at the bottom of the visible page even when the content pushes down further than the viewable area try absolutely positioning the div and adding a margin to the bottom of your page.

Michael Krauklis
  • 3,914
  • 2
  • 28
  • 28