Tailwind CSS cookbook · Beginner

Keep the footer at the bottom of short pages

Make the footer sit at the bottom of the window when there's little content, and below the content when there's a lot.

Create a free account to save this page, take notes and track your progress. Sign in

Approach

Make the page a full-height flex column (min-h-dvh flex flex-col) and let the main area grow (flex-1).

Solution

Keep the footer at the bottom of short pagesTry it yourself

<div class="flex min-h-64 flex-col">
  <header class="bg-slate-900 px-4 py-3 text-white">Header</header>
  <main class="flex-1 p-4">Short content: the footer still sits at the bottom.</main>
  <footer class="bg-slate-100 px-4 py-3 text-sm text-slate-600">© 2026 Camel Ltd</footer>
</div>

Pitfalls

h-screen instead of min-h-dvh: long pages get clipped and mobile toolbars hide content.

Variations

The grid version: grid min-h-dvh grid-rows-[auto_1fr_auto].

More Tailwind CSS recipes

Was this page helpful?