Sticky footer with flex

Quick implementation

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex: 1;
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer fixing page layout.

Goal: Make the footer stick to the bottom of the viewport when the main content is too short to fill the page — without using position: fixed or sticky.

Technical constraints:
- Use display: flex with flex-direction: column on the body element.
- Set min-height: 100dvh on the body so it always fills the viewport.
- Set flex: 1 on the main content element so it grows to fill remaining space.
- The footer should push down naturally when content is tall enough.
- Use 100dvh instead of 100vh for mobile browser compatibility.

Edge cases:
- Ensure html and body have no default margin/padding that prevents full-height.
- The footer should NOT overlap content — it should be pushed below the fold when content exceeds the viewport.
- Works with any number of elements between header and footer.

Why this matters in 2026

A footer floating in the middle of the page on short-content pages looks broken. Before flexbox, fixing this required negative margins, calc() hacks, or JavaScript. The flex sticky footer is three lines of CSS and works universally. It's one of those patterns every site needs and every developer should have memorized.

The logic

flex-direction: column on the body stacks header, main, and footer vertically. min-height: 100dvh ensures the body always fills at least the viewport height. flex: 1 on main tells it to absorb all remaining space. When content is short, main stretches and the footer sits at the bottom. When content is long, main grows with its content and the footer follows naturally below.

Accessibility & performance

This is a layout-only technique with zero impact on accessibility or performance. The DOM order matches the visual order — header, main, footer — which is exactly what screen readers expect. Flexbox column layout is resolved in a single browser pass. Using min-height instead of height ensures content can overflow the viewport without being clipped.