Archived note tailwind / Published 2024-04-14

Keep footer at bottom of the page

Content too short and footer is not at the bottom of the page? Here is a simple solution.

Written by Coolemur Read slowly. Think clearly.

Solution:

<div class="app flex min-h-screen flex-col">
  <header>Header</header>
  <main class="flex-1">Content</main>
  <footer>Footer</footer>
</div>

Explanation:

min-h-screen makes sure the container is at least the height of the screen.
flex-col makes sure the children are stacked vertically.
flex-1 makes sure the main content takes up the remaining space.

That’s the note. ✦

Back to the archive