When you’re dealing with browsers and markup, content tends to float to the top of the window by default. In most cases there is enough content on the page to keep the footer at the bottom of the window but, if a page doesn’t occupy the full height of the window, the footer is going to float right up to the bottom of the content creating an unattractive empty space below.
There plenty of blog posts and forum discussions about how to handle this with js or pure css. This is one of those things, though, that can get janky pretty quickly and you can run in to some odd behavior – especially with the js solutions. A while back I stumbled across a nice Sticky Footer example for Bootstrap which is one of the more elegant solutions I’ve found. If you aren’t using Bootstrap though, there is a Compass sticky footer module that provides the same functionality. I’ve used it on this site, which was built with Foundation, and it was as easy as adding a little bit of markup and dropping a single line in to my stylesheet:
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer");
You can see it in action on the homepage; notice that if you zoom out the footer stays put.