Il problema del footer

Questo è l’ultimo esempio che vedremo per i layout a colonna singola. Mi è capitato spesso di leggere di persone che volevano realizzare questo effetto: avere il footer sempre in fondo alla pagina. La tecnica che presenterò si può adattare anche ad alcuni layout a due e tre colonne. Vediamo come operare nel foglio di stile, usando i posizionamenti assoluti.

Per prima cosa, aggiungiamo una regola per estendere il body su tutta la finestra del browser. Questa regola serve per i browser moderni quali Opera e Mozilla, che attribuiscono come altezza effettiva degli elementi body e html solo l’altezza dei contenuti. A questo punto specifichiamo per il container un posizionamento relativo (position: relative): questa semplice regola ci consentirà di posizionare il footer rispetto al bottom del container, tramite position: absolute. Basterà specificare, per il footer, la proprietà bottom:0 e assegnare una larghezza (width) pari al 100%. La larghezza effettiva degli elementi posizionati assolutamente è quella necessaria al contenuto, a differenza degli elementi block level non posizionati.

L’ideale sarebbe, ora, assegnare un’altezza minima al container. Purtroppo, Internet Explorer non supporta la proprietà min-height. Per fortuna, però, su questo browser gli elementi, se la lunghezza della pagina supera quella della finestra del browser, vengono comunque resi all’interno del container stesso. Opera e Mozilla in caso di lunghezza maggiore assumono invece il comportamento corretto: il footer resta sul fondo della finestra del browser, e si dispone sopra i contenuti.

Opera e Mozilla supportano min-height e, a differenza di Internet Explorer, anche il child selector che useremo per dichiarare una regola ad hoc non vista da Internet Explorer. Infine, se la pagina è più lunga della finestra del browser, succede che il footer si dispone sopra le ultime righe del corpo centrale. Questo può essere evitato aggiungendo un padding-bottom al main pari o superiore all’altezza del footer. Ecco quindi la parte del css necessario per avere un footer sempre al fondo:

html,body{margin:0; padding: 0;height: 100%}
div#container{position: relative; height:100%}
body>div#container{height: auto; min-height: 100%}
div#content{padding: 0 1.5em 5em}
div#footer{position:absolute;bottom: 0;width: 100%}

Ed ecco questa variante applicata ad un layout fisso a colonna singola. Ecco come rende nel caso in cui i contenuti siano superiori alla pagina. Scarica l’esempio Ci tengo a precisare che Opera 7.23 presenta una piccola differenza di comportamento rispetto a Mozilla 1.5 e Internet Explorer 5.5 e 6. Il footer, in caso di contenuti che non generano scrolling verticale, allungando la finestra del browser dopo averla accorciata, non segue il suo fondo, se non dopo un aggiorna. Il footer resta comunque dopo i contenuti, sia che la pagina web sia più corta della finestra del browser che nel caso contrario.