Last Updated: June 21, 2021

A (slightly) new look at the sticky footer

The company I work for (Inventis) wrote in Dutch about creating a sticky footer for your website (link). That was almost 4 years ago. Even the compass docs still uses the same technique as us. I'm not saying we were the first to use this technique.

We've been using box-sizing: border-box; for quite some time now. Paul Irish wrote * { Box-sizing: Border-box } FTW in 2012. But can we use it to update or old sticky footer code?

Disclaimer: I'm not claiming I'm the first one to try this solution, neither did I actually test this. So if you (or if you know someone who) did something like this before then leave a comment and I will add the link to this post.

What we have been doing the last few years

Your HTML would look something like this:

<body>
  <div id="root">
    <div id="root_footer"></div>
  </div>
  <div id="footer">
    Footer content goes here.
  </div>
</body>

And your CSS probably something like this:

body, html {
    height: 100%;
}
div#root {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
div#root_footer, div#footer {
    height: 60px;
}

A new look a the sticky footer

When using box-sizing: border-box; we are finally able to remove that empty div#root_footer. This won't work in IE7 (or older) because it doesn't support box-sizing but it wouldn't break the layout so I think we can safely call this a progressive enhancement.

HTML:

<body>
  <div id="root">

  </div>
  <div id="footer">
    Footer content goes here.
  </div>
</body>

CSS:

body, html {
    height: 100%;
}
div#root {
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 60px;
}
div#footer {
    margin-top: -60px;
}

#css3

#sticky footer

#box-sizing