selbekk

Don't you just hate it when you create this wonderful design, which is made for a lot of content, and then you stumble across a page that just doesn't have the content to push the footer all the way to the bottom of the page?

Something like this:

See that terrible white gap thing at the bottom? Blergh.

How can we stick that footer to the bottom of the screen?

Luckily - the fix is pretty easy once you've learned how. This article is all about teaching you how to avoid this ugly "footer gap" once and for all! 🎉

First: The content structure

Most of the web sites I work with have a pretty simple basic structure. They have an outer container, a site header, a content area and a site footer. It's a versatile and popular design, and most web sites have some sort of variation of this.

You can create this structure with the following HTML:

<div class="site-container">
  <header class="site-header">...</header>
  <main class="site-content">
    ...
  </main>
  <footer class="site-footer"></footer>
</div>

Then: The CSS!

We're going to use the CSS layout algorithm flexbox to push that pesky footer down into the gutter where it belongs.

First, we apply the following styles to our site-container - that wrapping <div /> that encapsulates the entire web site:

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

Here, we specify that our main container should be laid out using flexbox, and that its children should be stacked vertically. We also specify that the site container should at least be the height of the screen.

Second, we have to apply one more CSS rule to our site-content:

.site-content {
  flex: 1;
}

flex: 1 is a quick way of saying that the item should grow as large as it can inside its container.

And that's it!

Here's a CodePen with the finished result:

Hope you find this useful! 😊