Sticky footers in the 21st century

Writing HTML has been a pastime for many coders for a long time, now. It’s not hard to do, and the expressive power of HTML+CSS is hard to match, when one considers how many people you can convey your thoughts to with just these two tools.

Although the landscape for these presentation languages is always adapting, in recent years, it’s been a pleasure to lean on the ‘flexbox’ module for displaying content without going batty.

A classic headache

Among the many annoyances of positioning content this way and that over the years, was having one’s webpage footer pushed to the bottom of the page. There have been many kludges to achieve this over the decades, but flexbox makes quick work of this age-old annoyance. And it does so, rather eloquently.

For anyone who wants their footer to ‘stick’ to the bottom of their webpage, no matter how little content that page may have (i.e. a ‘404’ error page), read ahead to see how it’s done in the 21st century.

A smidgen of CSS

The following three CSS classes set the style of a container, and children elements:

html, body{
  min-height: 100vh;
  margin: 0;}
.container{
  display: flex;
  flex-direction: column;}
.main{
  flex: 1;
  margin: auto;}
.bottom{
  margin: auto;}

The ‘bottom’ class element is declared, largely, for the sake of completeness. It’s not strictly necessary in order to make the footer ‘stick’ to the bottom. Also, we use margin: auto; to center align our content (perhaps the greatest CSS+flexbox shorthand there is).

The markup to match

Taking all the usual HTML preamble for granted — html, head, body — the following is all we need to make our footer fall where it should :

…
<div class="container">
  <div class="main">…</div>
  <footer class="bottom">…</footer>
</div>
…

It should be noted, that the use of ‘div’ & ‘footer’ is just semantics: it’s up to you what tags to use. But, in the above case, by using the footer tag, this doesn’t achieve anything in itself; flexbox is what’s doing all the magic.

Flexbox

The best thing to happen to the presentation layer in a long time, is the flexbox module. Sure, it’s not new, but for many developers, it’s one of the many options out there, so it’s bound to remain a mystery for anyone that just uses what they’re used to.

Be certain to give flexbox a spin for anyone who isn’t already using it.