clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Sticky footer done with simple CSS

Filed under: HTML/CSS— Tagged with: layout

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

Make the footer stuck to the bottom of the page, no matter how little content the page has, but still push it down if there is enough content.

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>

The 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 se 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. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!