Sticky footer

Quick implementation

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

header { /* your header styles */ }
main   { /* grows to fill remaining space */ }
footer { /* stays at the bottom */ }

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to generate the pattern in your project.

Create a sticky footer layout using CSS Grid. The body should use
display: grid with grid-template-rows: auto 1fr auto and min-height: 100dvh.
The page has three direct children: a header, main, and footer.
The main element should grow to fill all remaining vertical space
so the footer always sits at the bottom of the viewport,
even when content is short. Use semantic HTML elements.

Why this matters

Pages with minimal content often leave the footer floating in the middle of the viewport, creating an awkward visual gap. The sticky-footer pattern is one of the oldest layout problems on the web. Grid's 1fr row track elegantly solves it without hacks like negative margins, absolute positioning, or JavaScript height calculations.

The logic

grid-template-rows: auto 1fr auto creates three row tracks. The first and last (auto) shrink to fit their content — the header and footer. The middle track (1fr) claims all leftover space, pushing the footer down. min-height: 100dvh ensures the grid is at least as tall as the dynamic viewport (accounting for mobile browser chrome), so the footer reaches the bottom even when content is short. When content grows beyond the viewport, the page scrolls naturally.

Accessibility & performance

This pattern uses semantic <header>, <main>, and <footer> elements, giving screen readers clear landmarks. There is zero JavaScript and no layout shift — the browser computes the grid in a single pass. Using 100dvh over 100vh avoids the iOS Safari bug where the bottom of the page hides behind the browser toolbar.