Sticky footer

The name is a small lie that everyone has agreed to. Nothing here is sticky in the CSS sense, and nothing is fixed: the footer never travels with the viewport and never sits over the content. It has exactly one job, which is to not float in the middle of the screen when a page runs short. An about page with two paragraphs and a footer halfway down, with a field of empty background under it, reads as a page that failed to finish loading, and that impression is what the technique exists to prevent.

The condition has two halves and both are load bearing. When the content is shorter than the viewport, the footer sits on the bottom edge. When the content is longer, the footer goes back to being an ordinary block at the end of the document, below the fold, reached by scrolling. A footer that stayed on the bottom edge in the second case would be a different component with a different name (a bottom bar, or a fixed footer), and it would be covering content while it did it.

For about a decade this was genuinely awkward. The best known answer, Ryan Fait’s, pushed the footer down with a spacer carrying a negative margin equal to the footer’s height, which meant the footer had a height you were not allowed to change. Others used display: table, or absolute positioning with padding reserved on the wrapper. Flexbox reduced all of it to a wrapper at min-height: 100vh with the main region set to grow, and grid to grid-template-rows: auto 1fr auto, which is what the specimen does inside its own scroll container. The remaining wrinkle is that 100vh on a phone means the viewport with the browser chrome retracted, so the fix is 100dvh or min-height: 100% against a container whose height you actually own.

Worth saying out loud: this is a rule about where a footer lands, not permission to make the footer taller. A short page whose bottom half is a link farm has solved the empty space problem by filling the space with things nobody asked for.