Layout con footer e sidebar sticky

Un footer persistente rimane in fondo alla viewport quando il contenuto è breve, ma viene spinto verso il basso quando il contenuto è lungo. La difficoltà storica consisteva nel far rimanere fermo il footer senza conoscere l'altezza del contenuto e senza utilizzare JavaScript.

La soluzione moderna più semplice è: body { display: flex; flex-direction: column; min-height: 100vh; } e main { flex: 1; }. Il contenuto principale si espande fino a riempire lo spazio disponibile, spingendo il footer in fondo indipendentemente dalla lunghezza del contenuto.

Alternativa con CSS Grid: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. L'header ha un'altezza automatica, il main riceve 1fr e riempie lo spazio rimanente, mentre il footer ha un'altezza automatica. È una soluzione chiara ed esplicita: il modello delle righe mostra chiaramente l'intento del layout.

Applicare position: sticky; bottom: 0 al footer lo mantiene in fondo alla viewport durante lo scorrimento, ma solo quando il contesto di scorrimento lo consente. Funziona per i footer all'interno di un contenitore con scorrimento, ma è meno adatto ai footer persistenti a livello di pagina, per i quali Flexbox o Grid risultano più puliti.

Per un layout con sidebar e contenuto principale: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. Impostare min-width: 0 su main impedisce agli elementi flex di fuoriuscire dal contenitore quando includono contenuti molto larghi.

Sidebar con Grid: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. La colonna della sidebar ha una larghezza fissa, mentre quella del contenuto riempie lo spazio rimanente. Per aggiungere una riga per l'header, utilizzi grid-template-rows: auto 1fr e faccia estendere la sidebar su entrambe le righe.

Sui dispositivi mobili, disponga la sidebar sopra o sotto il contenuto principale: utilizzi una media query per passare da un layout a colonne Grid a una disposizione a colonna singola. In alternativa, utilizzi grid-template-columns: min(280px, 30%) 1fr per una sidebar fluida che si riduce nelle viewport più piccole.

Per fare in modo che una sidebar scorra in modo indipendente, utilizzi: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. La sidebar rimane visibile mentre il contenuto principale scorre: è l'ideale per la navigazione o per le sidebar con indice in pagine con contenuti lunghi.

Una sidebar comprimibile alterna uno stato a larghezza completa e uno stato con sole icone. Utilizzi una proprietà personalizzata CSS per la larghezza della sidebar: --sidebar-width: 280px sul wrapper, modificandola in 64px tramite una classe. Le transizioni animano il cambiamento di larghezza in modo uniforme.

Una sidebar con posizionamento fisso (position: fixed; left: 0; top: 0; height: 100vh) richiede di compensare il contenuto principale in base alla larghezza della sidebar: main { margin-left: 280px }. Sui dispositivi mobili, la sidebar scorre sopra il contenuto e dispone di un pulsante di chiusura e di un overlay di sfondo.

Contrassegni le sidebar di navigazione con <nav> e aria-label="Sidebar navigation". Le sidebar comprimibili richiedono un pulsante di attivazione accessibile con aria-expanded e aria-controls. I collegamenti per saltare la navigazione aiutano gli utenti da tastiera a bypassare le sidebar e raggiungere il contenuto principale.

Perché è necessario impostare min-width: 0 sull'elemento flex del contenuto principale in un layout con sidebar?

Flexbox con flex: 1 su main o una griglia a tre righe consentono di realizzare footer persistenti ordinati con un CSS minimo. I layout con sidebar utilizzano definizioni di colonne fisse o fluide e breakpoint reattivi per comprimersi sui dispositivi mobili. Sidebar persistenti, larghezze comprimibili e attributi ARIA accessibili completano pattern pronti per la produzione per sidebar e footer.