Layout mit Sticky-Footer und Sidebar

Ein Sticky Footer bleibt am unteren Rand des Viewports, wenn der Inhalt kurz ist, wandert bei langem Inhalt jedoch mit diesem nach unten. Die historische Herausforderung bestand darin, den Footer ohne Kenntnis der Inhaltshöhe und ohne JavaScript am unteren Rand zu halten.

Die einfachste moderne Lösung: body { display: flex; flex-direction: column; min-height: 100vh; } und main { flex: 1; }. Der Hauptinhalt wächst, um den verfügbaren Platz auszufüllen, und drückt den Footer unabhängig von der Inhaltslänge an den unteren Rand.

Alternative mit CSS Grid: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Der Header erhält eine automatische Höhe, main erhält 1fr und füllt den verbleibenden Platz aus, footer erhält auto. Sauber und eindeutig – das Zeilen-Template zeigt die Layout-Absicht klar.

position: sticky; bottom: 0 am Footer heftet ihn beim Scrollen an den unteren Rand des Viewports, allerdings nur, wenn sein Scrollkontext dies zulässt. Das funktioniert bei Footern innerhalb eines scrollenden Containers – für Sticky Footer auf Seitenebene ist es weniger geeignet, da Flexbox/Grid sauberer sind.

Ein Layout aus Sidebar und Hauptinhalt: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. Das min-width: 0 bei main verhindert, dass Flex-Elemente ihren Container überlaufen, wenn sie breite Inhalte enthalten.

Sidebar mit Grid: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Die Sidebar-Spalte ist fest, die Inhaltsspalte füllt den verbleibenden Platz aus. Fügen Sie eine Header-Zeile hinzu: grid-template-rows: auto 1fr, wobei die Sidebar beide Zeilen umspannt.

Reduzieren Sie die Sidebar auf mobilen Geräten oberhalb oder unterhalb des Hauptinhalts: Verwenden Sie eine Media Query, um von einem Grid-Spaltenlayout zu einem einspaltigen Stapel zu wechseln. Alternativ können Sie grid-template-columns: min(280px, 30%) 1fr für eine flexible Sidebar verwenden, die in kleineren Viewports schrumpft.

Damit eine Sidebar unabhängig scrollt: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Die Sidebar bleibt sichtbar, während der Hauptinhalt scrollt – ideal für Navigations- oder Inhaltsverzeichnis-Sidebars auf Seiten mit langen Inhalten.

Eine einklappbare Sidebar wechselt zwischen einem Zustand mit voller Breite und einem Nur-Icon-Zustand. Verwenden Sie eine CSS-Custom-Property für die Sidebar-Breite: --sidebar-width: 280px am Wrapper, und wechseln Sie über eine Klasse zu 64px. Transitionen animieren die Breitenänderung gleichmäßig.

Eine Sidebar mit fester Position (position: fixed; left: 0; top: 0; height: 100vh) erfordert, dass der Hauptinhalt um die Breite der Sidebar versetzt wird: main { margin-left: 280px }. Auf mobilen Geräten schiebt sich die Sidebar über den Inhalt und erhält eine Schaltfläche zum Schließen sowie eine Hintergrundüberlagerung.

Kennzeichnen Sie Navigations-Sidebars mit <nav> und aria-label="Sidebar navigation". Einklappbare Sidebars benötigen eine barrierefreie Umschalt-Schaltfläche mit aria-expanded und aria-controls. Skip-Links helfen Tastaturnutzenden dabei, Sidebars zu überspringen und den Hauptinhalt zu erreichen.

Warum muss bei einem Sidebar-Layout min-width: 0 für das Flex-Element mit dem Hauptinhalt gesetzt werden?

Flexbox mit flex: 1 bei main oder ein Grid mit drei Zeilen ermöglichen saubere Sticky Footer mit minimalem CSS. Sidebar-Layouts verwenden feste oder flexible Spaltendefinitionen mit responsiven Breakpoints, um auf mobilen Geräten zu einem einspaltigen Layout zu wechseln. Sticky Sidebars, einklappbare Breiten und barrierefreie ARIA-Attribute vervollständigen produktionsreife Muster für Sidebars und Footer.