Come creare una colonna con altezza piena

Utente HTML.it
chiede

Come creare una colonna con altezza piena

Redazione HTML.it
risponde

Quando si realizza un layout a due colonne spesso succede che una delle due colonne ha meno contenuti dell’altra e, se essa contiene un colore di backgroud differente, si ha uno sgradevole effetto “tagliato” come in Figura 1.

Figura 1 – Effetto “tagliato”

effetto tagliato

Possiamo vedere da vicino l’effetto nel seguente esempio.

Nell’esempio precedente abbiamo una struttura HTML come la seguente:

<div id="container">
    <div id="wrapper"></div>
    <div id="sidebar"></div>
</div>

ed una regola CSS che applica lo sfondo alla sidebar:

#sidebar { background-color: #f1f1f1; }

Per risolvere il problema dobbiamo semplicemente invertire i colori di background. Nel dettaglio: imposteremo un colore di background al div contenitore (#container) uguale a quello della barra destra (#sidebar) ed imposteremo un background di colore bianco al div principale (#wrapper).

Il codice CSS, quindi, sarà il seguente:

#container { background: #f1f1f1; }
#wrapper { background: #fff;  }

Figura 2 – Sidebar con altezza piena

Sidebar con altezza piena

Possiamo vedere il risultato finale nell’immagine di Figura 2 e, soprattutto al seguente link:

Esempio