clubmate.fi

Sticky footer done with simple CSS

Here’s how to do a sticky footer the right way™

Sticky footer refers to a technique where the footer is pushed all the way to the bottom of the page, no matter how little content the page has. Normally it’s the content that pushes the footer down.

This used to be really annoying and hard to do before flexbox was widely supported. But is quite effortless to do now.

Take the following, very usual looking HTML, as an example:

<div class="main">
  <header class="header">Cool website</header>
  <div class="content">
    <h1>Sticky footer example</h1>
    <p>
      Some interesting content, but not enough to push the footer all the way
      down.
    </p>
  </div>
  <footer class="footer">© 2020... or whatever</footer>
</div>

Then apply flexbox to the .main element, set the direction to column, and make it as high as the viewport. Then for the content element, the child of the flex container, use the flex shorthand property, and set it to 1:

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

That should do it.

View the About page of this blog to see it action, or this demo: