Responsive sticky footer woes and fixes

Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.

yes-no

That is the art of coding a sticky footer. Continue reading