I don’t know about you, but I absolutely hate footers that float in the middle of the page if the page has very little content. Like this:

Look at all that whitespace. Ick. I suspect I’m not alone in this, since I rarely see footers that don’t stick to the bottom of the window and then expand to accommodate more content. And yet, it’s not very straightforward how to make that happen. Even good ol’ Bootstrap doesn’t have a class for it.

Twice now, I’ve had to spend more time than I would like using the junior dev answer machines to figure it out.

So, now recorded for posterity:*

Sticky Footer by Chris Coyier @chriscoyier on CodePen

One caveat: This technique only works for fixed-height footers