Layout met sticky footer en sidebar

Een vastgezette voettekst blijft onderaan het weergavegebied staan wanneer de inhoud kort is, maar schuift omlaag met de inhoud wanneer die lang is. De historische uitdaging: de voettekst laten vaststaan zonder de hoogte van de inhoud te kennen of JavaScript te gebruiken.

De eenvoudigste moderne oplossing: body { display: flex; flex-direction: column; min-height: 100vh; } en main { flex: 1; }. De hoofdinhoud groeit om de beschikbare ruimte te vullen en duwt de voettekst naar onderen, ongeacht de lengte van de inhoud.

Alternatief met CSS Grid: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. header krijgt automatische hoogte, main krijgt 1fr (vult de resterende ruimte) en footer krijgt automatische hoogte. Helder en expliciet — de rijtemplate laat duidelijk zien wat de bedoeling van de indeling is.

position: sticky; bottom: 0 op de voettekst houdt die tijdens het scrollen aan de onderkant van het weergavegebied vast, maar alleen wanneer de scrollcontext dat toestaat. Dit werkt voor voetteksten in een scrollende container — minder geschikt voor vastgezette voetteksten op paginaniveau, waarvoor flexbox/grid netter is.

Een indeling met een zijbalk en hoofdinhoud: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. De min-width: 0 op main voorkomt dat flexitems buiten hun container vallen wanneer ze brede inhoud bevatten.

Indeling met Grid en een zijbalk: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. De kolom van de zijbalk heeft een vaste breedte; de inhoudskolom vult de resterende ruimte. Voeg een koptekstrij toe: grid-template-rows: auto 1fr waarbij de zijbalk beide rijen beslaat.

Op mobiele apparaten laat je de zijbalk boven of onder de hoofdinhoud inklappen: gebruik een mediaquery om van een indeling met rasterkolommen over te schakelen naar een stapel met één kolom. Of gebruik grid-template-columns: min(280px, 30%) 1fr voor een vloeiende zijbalk die op kleinere weergavegebieden smaller wordt.

Laat een zijbalk onafhankelijk scrollen: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. De zijbalk blijft in beeld terwijl de hoofdinhoud scrollt, ideaal voor navigatie of inhoudsopgavezijbalken op pagina's met lange inhoud.

Een inklapbare zijbalk wisselt tussen een toestand over de volledige breedte en een toestand met alleen pictogrammen. Gebruik een aangepaste CSS-eigenschap voor de breedte van de zijbalk: --sidebar-width: 280px op de omhulling, en wissel via een klasse naar 64px. Overgangen animeren de breedtewijziging vloeiend.

Een vast gepositioneerde zijbalk (position: fixed; left: 0; top: 0; height: 100vh) vereist dat je de hoofdinhoud compenseert met de breedte van de zijbalk: main { margin-left: 280px }. Op mobiele apparaten schuift de zijbalk over de inhoud heen met een sluitknop en een achtergrondlaag.

Markeer navigatiezijbalken met <nav> en aria-label="Sidebar navigation". Inklapbare zijbalken hebben een toegankelijke schakelknop nodig met aria-expanded en aria-controls. Overslaankoppelingen helpen toetsenbordgebruikers zijbalken over te slaan en de hoofdinhoud te bereiken.

Flexbox met flex: 1 op main of een raster met drie rijen zorgt met minimale CSS voor nette vastgezette voetteksten. Zijbalkindelingen gebruiken vaste of vloeiende kolomdefinities met responsieve breekpunten om op mobiele apparaten in te klappen. Vastgezette zijbalken, inklapbare breedten en toegankelijke ARIA-attributen maken productieklare patronen voor zijbalken en voetteksten compleet.