How to create a sticky footer with Flexbox

Aug 01, 2020

Creating a footer that sticks to the bottom of the browser window is something that most web developers have to tackle at some point in their careers.

The challenge of the sticky footer is ensuring that the footer appears right at the bottom of the screen even if there is very little content on the page.

Thanks to Flexbox, what used to require strange CSS or even JavaScript hacks has become quite trivial.

The idea is that we make the top-level element a flex container and set its flex-direction to column so that its child elements are stacked vertically. Then, we can utilize Flexbox’s layout model to make the footer stick to the bottom of the screen.

So assuming a basic HTML document structure where we use <body> as our top-level element.

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

We can make the .site-footer element sticky by applying the following CSS:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

This works because we are setting flex: 1 on .site-content which will make it expand to fill all the available space on the screen.

For example, if our browser screen had a height of 1000px and .site-header was 200px and .site-footer was 100px, then .site-content would fill up all the remaining 700px, thus pushing .site-footer right to the bottom of the screen.

The beautify of this approach is that we don’t have to know the height of the footer or any other element. It just works!

Here’s a CodeSandbox demonstrating this technique.