Build a sticky footer for pages with short content

A page with only a few lines of content leaves the footer floating halfway up the screen instead of sitting at the bottom.

Beginner to intermediateRead 5 minDoing: 20 minutes5 steps

▶ Start

What you'll have at the end

A footer that always sits at the bottom of the viewport on short pages and below the content on long ones

Before you start

You need

A page whose header, main content and footer are already separate elements in your HTML, plus a browser to preview it in.

Not covered

A footer that stays pinned to the screen while you scroll past long content: that's position: fixed on the footer, a different technique from making it settle at the true bottom of a short page.

Leans on

CSS Cheat SheetIts Units of Measurement table covers the viewport unit this recipe swaps in for the usual one, and its Box Model and Flexbox tables carry the properties every later step sets.
CSS Flexbox Layout Cheat SheetIts own Responsive Patterns table names this exact layout, and its Flexbox vs CSS Grid table backs the choice between the two container types.

5 steps

Checked 20 Aug 2026

Part of the CSS cookbook