Sticky Footer and Sidebar Layout
Build layouts with sticky footers and sidebars that stretch full height using Grid or Flexbox.
Sticky Footer Problem
A sticky footer stays at the bottom of the viewport when content is short, but pushes down with content when content is long. The historical challenge: making the footer stick without knowing content height or using JavaScript.
Flexbox Sticky Footer
The simplest modern solution: body { display: flex; flex-direction: column; min-height: 100vh; } and main { flex: 1; }. The main content grows to fill available space, pushing the footer to the bottom regardless of content length.
All lessons in this course
- Sticky Footer and Sidebar Layout
- Holy Grail Layout with Grid
- Masonry Layout: CSS and JS Approaches
- Intrinsic Design: Content-Driven Sizing