A good[ish] website

Web development blog, loads of UI and JavaScript topics

Sticky footer done with simple CSS

Filed under: UI components— Tagged with: layout, 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>
      Some interesting content, but not enough to push the footer all the way
  <footer class="footer">© 2020... or whatever</footer>

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:

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!