Layout & grid

Sticky Footer

Q: How do I implement a Sticky Footer?

Make the footer stick to the viewport bottom on short pages: page wrapper is flex column with min-height: 100dvh (not height, not 100vh), main gets flex: 1, footer follows in normal flow. On long pages it must scroll away—this is not position: fixed. Add safe-area padding if the footer has actions.

On short pages the footer hugs the viewport bottom; on long pages it follows normal document flow.

Also known as footer pin · footer to bottom · short-page footer

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Sticky Footer".

Make the footer stick to the viewport bottom on short pages: page wrapper is flex column with min-height: 100dvh (not height, not 100vh), main gets flex: 1, footer follows in normal flow. On long pages it must scroll away—this is not position: fixed. Add safe-area padding if the footer has actions.

Anatomy:
- flexible main: main { flex: 1 } pushes the footer down.
- min-height: 100dvh: Use min-height, not height, so long content can grow.

Preferred API / pattern: `flex min-h-dvh flex-col + flex-1 main`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Using height
○Avoid: position
○Avoid: flex
○Avoid: 100vh on mobile

In plain wordsHow people search for it

“when there's not much content, the footer still sits on the bottom of the screen”“empty page with the copyright floating halfway up looks broken”“nail that copyright line to the bottom on short pages”

AnatomyOpen for part names

flexible main: main { flex: 1 } pushes the footer down.
min-height: 100dvh: Use min-height, not height, so long content can grow.

How to write itOpen for stack patterns

Web (HTML/CSS)flex column + main { flex: 1 } / min-height: 100dvh

React + Tailwind + shadcn/uiflex min-h-dvh flex-col + flex-1 main

SwiftUIVStack { content; Spacer(minLength: 0); footer } in a full-height frame

Ant Design<Layout style={{ minHeight: '100vh' }}> + Content flex grow

Notes

Not the same as a fixed footer that always floats over content. Sticky footer only pins when content is short; long pages scroll past it naturally. Modern recipe: flex column, min-height: 100dvh, main flex: 1. Grid variant: rows auto 1fr auto. height: 100vh is the classic bug—content overflows or double-scrolls; use min-height and prefer dvh on mobile.

Common mistakesHumans and models trip here

Using height: 100vh: long content overflows; min-height is the keyword.
position: fixed by mistake: that is a floating chrome footer that always covers content.
flex: 1 on the footer: the footer expands instead of the main region.
100vh on mobile: browser chrome changes leave a gap—use dvh.

More failure symptoms on AI broke it.

Related patterns

Holy Grail LayoutHeader, footer, side rails, and a flexible main region—the classic full-page shell.CenteringPut an element in the middle of its container—still the most-asked layout question on the web.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.

Spotted a wrong name or missing pattern?

Message on X