Tag: css

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!

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!