selbekk

Posted on Aug 20, 2019 • Edited on Mar 6, 2020 • Originally published at selbekk.io

How to make your footer stick to the bottom of your page

#quicktip #css #html

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! :)

Top comments (6)

Stephanie Handsteiner • Aug 21 '19 • Edited

Also possible using grid, obviously.

Something like this, written on my mobile phone, thus not tested, but that should stick the footer to the viewport's bottom.

<div class="content">Some content not filling the viewport</div>
<div class="footer">Footer</div>

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
}
.footer {
    background: #000;
    color: #fff;
    grid-row: 2 / 3; 
}

O, George. MWS. • Dec 4 '19

That was really easy. Thank you so much

Luke.S.Murray • Dec 7 '19

Hi thanks for helping me get the footer to remain at the bottom. Now I wonder if there is anything that can be done with the large white space between the footer and the tiny bit of content i have below the header.
It seems like the content stays within Main but then there is a massive white space between the Main and the Footer(Since the footer is "forced" to the bottom of the page).

selbekk • Dec 8 '19

Hi! What do you want to do with that space?

imsikun • Aug 21 '19

Thanks sir for this article i have been struggling with this previously. Though managed to do it but this one is the simplest of all of them.
Really helpful...