Updated May 3, 2026
A sticky footer stays at the bottom of the viewport when content is short, and naturally pushes down when content fills the page. This is a must-have pattern for every website layout.
This collection demonstrates multiple CSS approaches to create sticky footers: Flexbox method (most modern), CSS Grid method, and the classic calc() approach. All examples are pure CSS — no JavaScript needed.
Why sticky footers matter: Without a sticky footer, short pages leave empty space below the footer — making your site look incomplete. These demos show production-ready solutions that work across all modern browsers.
Chris Coyier's classic Flexbox sticky footer implementation. Uses display: flex on the body with flex: 1 on the content area to push the footer down naturally.
Technologies
Code By
Chris Coyier
Created
2023-06-10
Lightweight sticky footer without fixed heights using Flexbox. The invisible flex spacer technique keeps the footer at the bottom regardless of content length.
Technologies
Code By
Morten Stadel
Created
2024-08-15
Rachel Andrew's demo from Smashing Magazine showing Flexbox sticky footer pattern with a card layout. Includes header, content, and footer sections.
Technologies
Code By
Rachel Andrew
Created
2023-09-20
Flexbox cards with sticky footer inside each card. Perfect for card-based UIs where the card footer should always stay at the bottom of the card.
Technologies
Code By
Vlrprbttst
Created
2024-11-05
Simple and clean Flexbox sticky footer implementation. Demonstrates the minimum CSS needed to achieve a working sticky footer pattern.
Technologies
Code By
Paynoattn
Created
2024-07-30
