CSS Academy · Lesson

Sticky Footer and Sidebar Layout

Build layouts with sticky footers and sidebars that stretch full height using Grid or Flexbox.

Sticky Footer and Sidebar Layout is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Grid Sticky Footer

CSS Grid alternative: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Header gets auto height, main gets 1fr (fills remaining space), footer gets auto. Clean and explicit — the row template clearly shows the layout intent.

position: sticky Footer

position: sticky; bottom: 0 on the footer sticks it to the viewport bottom while scrolling but only when its scrolling context allows it. Works for footers inside a scrolling container — less appropriate for page-level sticky footers where flexbox/grid is cleaner.

Sidebar Layout with Flexbox

A sidebar + main content layout: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. The min-width: 0 on main prevents flex items from overflowing their container when containing wide content.

Sidebar Layout with Grid

Grid sidebar: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. The sidebar column is fixed; content column fills remaining space. Add a header row: grid-template-rows: auto 1fr with the sidebar spanning both rows.

Responsive Sidebar

On mobile, collapse the sidebar above or below main content: use a media query to switch from a grid column layout to a single-column stack. Or use grid-template-columns: min(280px, 30%) 1fr for a fluid sidebar that shrinks on smaller viewports.

Sticky Sidebar

Make a sidebar scroll independently: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. The sidebar stays in view while the main content scrolls, ideal for navigation or table of contents sidebars on long-form content pages.

Collapsible Sidebar

A collapsible sidebar toggles between a full-width and icon-only state. Use a CSS custom property for sidebar width: --sidebar-width: 280px on the wrapper, toggle to 64px via a class. Transitions animate the width change smoothly.

Overflow in Fixed Sidebars

A fixed-position sidebar (position: fixed; left: 0; top: 0; height: 100vh) requires offsetting main content by the sidebar width: main { margin-left: 280px }. On mobile, the sidebar slides over the content with a close button and backdrop overlay.

Accessibility for Sidebars

Mark navigation sidebars with <nav> and aria-label="Sidebar navigation". Collapsible sidebars need an accessible toggle button with aria-expanded and aria-controls. Skip links help keyboard users bypass sidebars to reach main content.

Knowledge Check

Why does min-width: 0 need to be set on the main content flex item in a sidebar layout?

Summary

Flexbox with flex: 1 on main or a three-row grid achieve clean sticky footers with minimal CSS. Sidebar layouts use fixed or fluid column definitions with responsive breakpoints to collapse on mobile. Sticky sidebars, collapsible widths, and accessible ARIA attributes complete production-ready sidebar and footer patterns.

Frequently asked questions

Is the “Sticky Footer and Sidebar Layout” lesson free?

Yes — the full text of “Sticky Footer and Sidebar Layout” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Sticky Footer and Sidebar Layout”?

Build layouts with sticky footers and sidebars that stretch full height using Grid or Flexbox. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Sticky Footer and Sidebar Layout” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy