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”
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
Possiamo vedere il risultato finale nell’immagine di Figura 2 e, soprattutto al seguente link: