1 minute read

CSS Snippet: Stay at the bottom, footer!

Footer issue

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.

<html>
  <body>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>
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.

Footer issue fixed

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!

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

Subscribe to my Newsletter 💌

I post about front-end web development,
 productivity, and other interesting things. 

No spam and feel free to unsubscribe any time.