Flexing your HTML footer to the screen bottom
Tags: css, flexbox, html, webdev
Published: 2020-02-04 16:19:09

## Howto make your footer stick to the bottom with flexbox

**Having a footer at the bottom of your HTML page can be very useful. Traditionally, forcing the footer down there was a quite hard task if the page content didn't fill the whole browser height. But nowadays using flexbox and some auto-margin can save the day.**

When designing a HTML page you often want to add a footer with some additional but secondary information. Logically, the footer should be at the very bottom of the page. One could just add the footer markup as the last piece in the document and call it a day. That'll work, mostly. But what happens when the page content doesn't fill the entire height of your users screen? Well, the footer be rendered directly after your content and hang somewhere in the middle of the screen. That's not what we wanted. Luckily, flexbox can save the day here, without relying on obsure hacks!

Want to see the code and end result right away? Here's a [codesandox](https://codesandbox.io/s/sticky-footer-ropgr).

{% codesandbox sticky-footer-ropgr module=styles.css %}

Let me walk you through that. We start with a minimal HTML setup, just to have something to work with.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <section>
      <h1>🔥Hello Footer down there🔥</h1>
      <p>
        ⬇️This content does not fill a whole page height. The footer belongs
        down there. ⬇️
      </p>
    </section>
    <footer>🔥I'm the footer. My margin pushes me down.🔥</footer>
  </body>
</html>
```

All we have here is a short main section and a footer. This will create the undesired effect of having a floating footer in the middle of your screen. To make that footer sticky, we need some CSS.

### Making the footer sticky

We'll use flexbox and margin to push the footer at the bottom of the screen.

- Set the container to `display: flex;`. The container is the body in our example.
- Change the containers' `flex-direction: column`. This lets the footer flow below the content.
- Give the container full height with `min-height: 100vh;`. The container is now large enough, but the footer still floats somewhere in the middle.
- Finally, give the footer enough margin with `margin-top: auto;`. That pushes the footer down to the bottom.

That's it, the footer will be at the pages' bottom, even with small content. Note that when the content gets larger than the users screen, the footer will flow normally at your pages bottom as well, no extra work there.

Here's the relevant CSS.

```CSS
/* Use flex and set auto margin */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}
```

Thanks to webflow for the [video inspiration](https://youtu.be/NSnx-2Ztyfo) to this article.

Hope this helps you to create your next HTML layout. Follow me on [twitter](https://twitter.com/kriswep) or leave a comment.

<sub><sup>First published as [Flexing your HTML footer to the page bottom](https://wetainment.com/articles/sticky-html-footer/).</sup></sub>