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.