How do I keep a footer at the bottom on short pages in Tailwind?

Wrap the page in flex flex-col min-h-screen (or min-h-dvh) and add flex-1 to the main content so it expands and pushes the footer to the bottom.

What is the difference between min-h-screen and min-h-dvh?

min-h-screen is 100vh; min-h-dvh is the dynamic viewport height that adjusts as the mobile browser toolbar appears and disappears, avoiding layout jumps on phones.

Should I use flex or grid for a sticky footer?

Both work. Flex uses flex flex-col with flex-1 on main; grid uses grid-rows-[auto_1fr_auto]. Pick whichever matches the rest of your layout.

Layout Recipe

Pin a Footer to the Bottom with Tailwind Flexbox

A sticky footer keeps your footer pinned to the bottom of the viewport even when page content is short. Apply 'flex flex-col justify-between min-h-screen' to your page wrapper: the column direction stacks header, main, and footer vertically, and 'justify-between' pushes the first child to the top and the last child to the bottom. Alternatively, put 'flex-1' on the main content area to make it absorb all spare space.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Show Layout Guides

Current Layout:

The sticky footer pattern: flex-col, min-h-screen, flex-1

A sticky footer sits at the bottom of the viewport on short pages and below the content on long ones. Make the page wrapper a full-height column with flex flex-col min-h-screen, then give the main content flex-1 so it expands to fill any leftover space, pushing the footer down.

Tailwind

<body class="flex flex-col min-h-screen">
  <header>...</header>
  <main class="flex-1">...</main>
  <footer>...</footer>
</body>

Vanilla CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}

min-h-screen vs min-h-dvh on mobile

min-h-screen maps to 100vh, which on phones can include the area under the browser toolbar and cause a slight jump as the bar shows and hides. Tailwind also ships min-h-dvh (dynamic viewport height): it tracks the visible viewport in real time, so the footer stays put. Prefer min-h-dvh for app-like mobile layouts.

flex vs grid for a sticky footer

Grid does the same job with a three-row template: grid grid-rows-[auto_1fr_auto] min-h-dvh sizes the header and footer to their content while the middle 1fr row absorbs the slack. Flex is the more common choice, but grid is tidy when you already know the header / body / footer structure.

Grid alternative

<div class="grid grid-rows-[auto_1fr_auto] min-h-dvh">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

Common mistakes

Using position: fixed on the footer. A fixed footer overlaps content and is always visible — not the same as a sticky footer that follows the content.

No height on the wrapper. Without min-h-screen or min-h-dvh there is nothing for flex-1 to fill.

Putting flex-1 on the footer. It belongs on the main content region, which should grow — not the footer.

Frequently asked questions

How do I keep a footer at the bottom on short pages in Tailwind?: Wrap the page in flex flex-col min-h-screen (or min-h-dvh) and add flex-1 to the main content so it expands and pushes the footer to the bottom.
What is the difference between min-h-screen and min-h-dvh?: min-h-screen is 100vh; min-h-dvh is the dynamic viewport height that adjusts as the mobile browser toolbar appears and disappears, avoiding layout jumps on phones.
Should I use flex or grid for a sticky footer?: Both work. Flex uses flex flex-col with flex-1 on main; grid uses grid-rows-[auto_1fr_auto]. Pick whichever matches the rest of your layout.