Sticky Footer with Flexbox

Sticky Footer with Flexbox

A "sticky footer" stays at the bottom of the viewport when page content is short, but moves down naturally when content exceeds the viewport height. This was notoriously difficult before Flexbox; now it takes just a few lines.

CSS Code

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 auto;
}

main {
  flex: 1;
}

footer {
  flex: 0 0 auto;
}

How It Works

1. The body (or a wrapper element) becomes a column flex container with min-height: 100vh, ensuring it fills at least the full viewport.
2. Header and footer use flex: 0 0 auto — they do not grow or shrink and take only the space their content needs.
3. Main uses flex: 1 (shorthand for flex-grow: 1) — it expands to fill all remaining space.

When content is short, main stretches to push the footer to the viewport bottom. When content is long, main grows with its content and the footer sits naturally after it.

Why min-height, Not height

Using min-height: 100vh instead of height: 100vh is critical. With height: 100vh, the body would be exactly viewport height and content would overflow. With min-height, the body is at least viewport height but can grow taller.

Multiple Content Sections

You can have multiple sections between header and footer:

header { flex: 0 0 auto; }
.hero { flex: 0 0 auto; }
main { flex: 1; }
.cta { flex: 0 0 auto; }
footer { flex: 0 0 auto; }

Only the element with flex: 1 expands. All others take their natural size.

Alternative: CSS Grid

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Both approaches work well. The Flexbox version is more intuitive when you think of the layout as a vertical flow of sections.