TIL: A Better Sticky Footer

»Sticky footers« are somewhat common in web design and are a reoccurring problem to solve. A sticky footer ensures, that the page footer (copyright, meta navigation, social links etc.) sticks to the bottom of the viewport, when a page has very little content or the viewport is very tall. Because it would look quite odd, when your footer floats around mid-window.

Luckily, CSS has evolved a lot over the last years and things have become a lot easier than just a few years ago. In a recent article on CSS Tricks, I think this is the most elegant technique that I’ve come across so far (probably invented by Sílvio Rosa):

I haven’t used it in a project yet, but it seems to have less side-effects than using Grid or Flexbox. Though I must admit, that it’s actually not that intuitive, so I would always add a comment when doing something like this:

html, body {
  height: 100%;
}

body > footer {
  position: sticky;
  top: 100vh;
}

(Source: https://css-tricks.com/a-clever-sticky-footer-technique/)