Recently I had the need to have a footer which would stick to the bottom of the screen when there wasn’t enough content on screen to keep the footer at the bottom of the page (aka a sticky footer) and rather than break my head over how to achieve this without the use of JS, I decided to do a quick Google Search. Here are some interesting results I’ve come across:

• Ryan Fiat’s Sticky Footer: Good sticky footer, except one problem. Unless a DIV does not have a height defined, the sticky footer fails to recognize how big the content DIV is and therefore we end up with overlapping DIV’s.
• CSS Sticky Footer: This sticky footer I’ve ran across before, and now checking it out again, this is a good sticky footer to use. However, the only issue it has is the fact it uses several hacks in order to be compatible with the major browsers it supports.
• …and Several More: While there are other attempts at figuring out the sticky footer issue, there really is no point to list them since none of them are perfect in terms of cross-browser compatibility.

That being said, I find the CSS Sticky Footer is currently the best way to address the sticky footer issue. While for some, this code’s use of CSS hacks isn’t quite ‘delicate‘, it still does the trick and therefore I recommend anyone who comes across this issue to use the 2009 CSS Sticky Footer. It’ll save you both time and frustration in your coding process.

Popularity: 27% [?]