How to build a super-simple, clean CSS sticky footer

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:

    min-height: 100%
    position: relative
    margin-bottom: 50px
    width: 100%
    height: 50px
    position: absolute
    left: 0
    bottom: 0

And a basic page markup:

    Meaningful content.
        Yay, I'm sticky!

Neat, right?

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).

Have fun!

Leave a Reply

Please Login to comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.