Sticky footers, although being a simple concept, have always been a pain to implement in plain CSS.
Lately I had to build one for a project here in Mikamai, and I found myself using a technique I realized not everyone knows.
It boils down to these few lines of CSS code:
html min-height: 100% position: relative body margin-bottom: 50px footer width: 100% height: 50px position: absolute left: 0 bottom: 0
And a basic page markup:
body Meaningful content. footer Yay, I'm sticky!
You’re basically giving the body some extra “space” (via a bottom margin) in which you’ll later position your footer absolutely. So, as you can see, the bottom margin on the body equals to your footer’s height.
If you’re using any CSS preprocessors, you could further improve this piece of code, storing your footer height in a variable. This way, when you’ll need to edit your footer you just need to change a single value (ideally in a separated var.scss file).