Sticky footer
A footer that reaches the bottom of the screen on short pages, but moves down normally when the content grows taller.
See it
What it is
A sticky footer sits at the bottom edge of the viewport when a page is too short to fill the screen, then returns to normal document flow when the content is taller. It solves the awkward short-page gap where the footer appears halfway up the screen.
Use it for login pages, sparse settings screens, error pages, and any site shell whose content length varies. The modern pattern is a min-height page grid with three rows: auto for the header, 1fr for main, and auto for the footer. Before Flexbox and Grid this needed recipes with names: Ryan Fait's CSS Sticky Footer leaned on a negative margin and a spacer div, and Philip Walton's Solved by Flexbox replaced it with a single flex-grow.
Gotcha: this is not position: fixed. A fixed footer covers the bottom of long content unless space is reserved for it, while a sticky footer simply gets pushed down by the flexible main row. Put the minimum height on the page shell, not on main, or the header and footer can make the document taller than the viewport.
Ask AI for it
Make the page use the CSS Grid sticky-footer pattern. Set the outer shell to min-height: 100dvh, display: grid, and grid-template-rows: auto 1fr auto, with header, main, and footer in those rows. Keep the footer in normal document flow and do not use position: fixed or position: sticky. Verify that it touches the viewport bottom with one line of main content and follows the content after several screens of text.