January 31 2021 • 3 min read

CSS Snippet: Stay at the bottom, footer!

I experienced this footer problem before in this site, but I got away with it because there are no pages that have no content to make this happen 😆. But in this side project of mine (which is a Hacker News reader), there are times when a post don't have no comments yet, and I have no control over it.

I've looked for solutions over the internet and this is the most clever solution I saw: using flexbox.

index.html
<html>
  <body>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

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

main {
  flex-grow: 1;
}

I love this solution because it's so simple and it tells us what it does.

💡 The whole body is a flexbox which has a minimum height of whatever the browser's height is.

💡 The main content's height grows to occupy the remaining space. Pushing the footer to the bottom of the page.

And... that's it! Now the footer stays at the bottom whenever there are no or few contents in the page.

You can easily do it on Tailwind too!

index.html
<div class="min-h-screen flex flex-col">
  <header>Header</header>
  <main class="flex-grow">Main Content</main>
  <footer>Footer</footer>
</div>

I've also made a simple example using CodeSandbox and Tailwind Play.

CSS Snippet: Stay at the bottom, footer!

A small favor