Generate the CSS for a page footer that stays at the bottom of the viewport when content is short and scrolls naturally when content is long. Compare flexbox, CSS Grid, and the legacy min-height + margin-top:auto approach with a live preview.
Resize by switching device, or change “Preview content” to see short vs long.
body a flex column with min-height: 100vh and let main grow with flex: 1 0 auto. The footer sits naturally at the end.auto 1fr auto on the body. Equivalent to flex but with named template areas if you have a side rail too.min-height + margin-top: auto — predates flexbox and grid; only useful if you still ship to ancient browsers.100dvh + flex — same as flex but uses dynamic viewport units so the page does not jump when the iOS Safari URL bar collapses. Falls back gracefully via @supports.⚠️ min-height: 100vh on iOS reserves space for the URL bar that may not be visible — use 100dvh for the dynamic value, or 100svh / 100lvh for explicit small / large viewport heights.