Immaginate di avere un sito con diverse pagine, ogni pagina ha una lunghezza di contenuti diversa, cosa succede al footer di questo sito se una di queste pagine dovesse contenere solo un paio di righe di testo o comunque pochi contenuti? Se non sapete gia la risposta probabilmente è perche avete sempre realizzato siti dove in tutte le pagine i contenuti riempiono in lunghezza un monitor di dimensione media (15/17 pollici a 1024x768 pixel) e non siete ancora incappati nello sfortunato caso in cui il footer non occupa proprio la posizione di cui prende il nome (piede di pagina)...  Nel caso in cui questo fattaccio capiti in una sola pagina potreste inventarvi da voi delle soluzioni per mettere una "pezza" al problema e risolvere la questione, ma quello che voglio mostrarvi ora è un metodo per rendere questa soluzione dinamica e fare in modo che con qualche regola CSS e un paio di righe markup Html aggiuntivo si possa sistemare la questione in tutte le pagine.

Premessa

Alcune regole CSS che utilizzo in questa soluzione possono sembrare ridondanti, effettivamente lo sono ma servono a fare in modo che questo codice funzioni allo stesso modo su più browser possibili. Quando ti seguito l'ho sperimentato personalmente con esiti positivi su Firefox 3.5, Safari 4, Opera 9 e Internet Explorer 7. In questa pagina potete vedere un'esempio del caso descritto poco fa, per porre rimedio a questa situazione affronteremo un paio di cosette nuove: i margini negativi e la regola !important ; oltre a questo è tutto CSS "classico". La prima cosa da fare è dire al nostro documento che dovrà espandersi al 100% dell'altezza della finestra del browser in cui si trova:

html, body {
	height: 100%;
}

poi dovremo fare in modo che il div contenitore dentro il quale sviluppiamo il nostro sito si espanda anche lui al 100% dello spazio verticale disponibile, e lo costringeremo a farlo imponendogli il valore dell'altezza anche come altezza minima:

#contenitore {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}

Per ora lasciate stare l'ultima riga la spiegherò nel prossimo passo. In questo punto è dove può sembrare un po ridondante il codice: siccome non tutti i browser non reagiscono allo stesso modo abbiamo bisogno per sicurezza una regola che dica che l'atezza di questo div deve essere automatica (cioè in base a quanto concede la finestra del browser) e la indichiamo come regola importante con la parola chiave !important , con !important si fa in modo che una determinata regola prevalga su altre che modificano la stessa proprietà indicata anche se sono "gerarchicamente" superiori. A questo punto scriviamo i Css anche per il footer e per un'elemento extra che chiameremo "push" (spinta):

#footer , .push {
	height: 30px;
	line-height: 30px;
}

Questa è la parte più interessante... tralasciamo il line-height che serve solo a centrare verticalmente il testo, come potete notare l'altezza di entrambi #footer e .push è uguale al margine inferiore negativo del contenitore. La logica di base inizia a prendere forma, capirete meglio tutto quando vedrete il markup Html: Praticamente cosa abbiamo combinato: documento e div contenitore si espandono al 100% dello spazio verticale, ma il div contenitore avendo un margine negativo di N pixel (nel nostro caso 30) tenderà ad andare ancora più al di sotto di quanto spazio c'è disponibile, il div .push ha l'altezza degli stessi N pixel il che riporta il div contenitore a occupare esattamente lo spazio verticale disponibile, ma permettendoci di inserire un'altro elemento al di sotto di esso, ovvero il footer. So che la spiegazione può non essere chiara a tutti, io stesso i primi tempi ci ho messo un po' a capire questo meccanismo, se avete dubbi o perplessità potete sempre scrivermi una mail o postare un commento in fondo all'articolo. Qui potete trovare la pagina con il codice corretto, vi basterà fare Tasto destro -> Visualizza codice per vedere il tutto, essendo l'esempio molto breve ho incluso i css nel file html, in modo da rendervi la consultazione più rapida.

Concetti chiave

Il documento e il div contenitore devono espandersi al 100% dello spazio verticale che offre il browser. Il margine inferiore negativo del div contenitore e le altezze di "push" e del footer devono essere uguali.