DEV Community

loading...
Cover image for How to make your footer stick to the bottom of your page

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

selbekk profile image selbekk Originally published at selbekk.io Updated on ・2 min read

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

Discussion

pic
Editor guide
Collapse
stephanie profile image
Stephanie Handsteiner

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; 
}
Collapse
vgolfk profile image
O, George. MWS.

That was really easy. Thank you so much

Collapse
cvampiri profile image
Luke.S.Murray

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).

Collapse
selbekk profile image
selbekk Author

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

Collapse
imsikun1 profile image
imsikun

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...

Collapse
midblue profile image
Jasper Stephenson

I also love the ol' box-shadow: 0 100vh 0 100vh var(--footer-bg-color); trick :)