Search code examples
htmlcsspositionoverflowsticky-footer

Sticky footer: why could overflow:auto; and position:relative; be needed?


I'm using css sticky footer from http://www.cssstickyfooter.com/

Why do we need: #main{overflow:auto;} and #footer{position: relative;}?

Seems like it works without it (I'm not talking about Opera and IE fixes).


Solution

  • overflow:auto; will simply add the scroll bar if the page is longer than what can be displayed based on your screen height. I've used it before and believe it ensures your footer stays visible at the bottom of the page when you scroll.

    Have you tried it on a page that is longer than the screen can display to see how it behaves?

    Quote from cssstickyfooter.com:

    No Need for Clearfix Hack!

    Many CSS designers will be familiar with the Clearfix Hack. It solved a lot of problems with floating elements. A previous version of this Sticky Footer solution used it. Instead, a more modern and easier to code solution is the overflow statement. We apply it to the main to help get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main can cause the footer to become un-stuck in some browsers.