Posizionare il footer in maniera assoluta con i CSS

E se lo volessimo in basso, proprio dove termina la finestra del browser, immediatamente prima della barra di stato? Sono dolori o dobbiamo rinunciare? Non credo proprio. Nè la prima, nè la seconda risposta. Possiamo avere il nostro "amato" footer dove decidiamo noi di volerlo posizionare.

Sperando di poter dare il mio piccolo contributo a questo noioso comportamente del footer, e cercare di risolverlo, proviamo a realizzare una ipotetica pagina con annesso "piede" in basso e pochi contenuti, altrimenti non avremmo chiaro come funziona.

Gli elementi che inseriremo nella pagina saranno:

Il codice CSS, per questi tre elementi, non è nulla di particolarmente difficoltoso:

#header{ 
border-top:5px solid #333; 
border-bottom:1px dotted #333;
height: 6em;
line-height: 6em; 
width:100%;
margin:0;
padding:0;
}

#content{ 
margin:2em auto;
padding:0; 
background:transparent;
border:1px solid #666;
width:80%; 
text-align:left; 
}

#footer{ 
width:100%;
background-color:#333;
height:3em;
line-height:3em; 
text-align:left;
}  

Senza soffermarci troppo sul codice, non c'è nulla di particolare a dire il vero, passiamo a vedere la pagina di esempio che viene fuori.

Non è proprio il massimo ma si può fare di meglio; basta aggiungere qualche ulteriore dichiarazione nel foglio di stile ed il gioco è fatto.

Dobbiamo introdurre un nuovo elemento di blocco: un contenitore generale che al suo interno racchiude i tre elementi che abbiamo appena visto nella pagina di esempio. La struttura, quindi, diventa:

Oltre a questo elemento, si dovrebbe aggiungere una dichiarazione per quanto riguarda gli elementi <html> e <body> della pagina html Di conseguenza avremo:

html, body, #container{ 
min-height:100%; 
width:100%;
height:100%;
} 

Siccome dobbiamo pensare anche a coloro i quali usano ancora Internet Explorer, ed aggiungo purtroppo, si è costretti a procedere con espedienti, trucchi, commenti condizionali e chi più ne ha più ne metta per rendere omogenee le pagine web che realizziamo. Della proprietà min-height, Internet Explorer non ne vuole proprio sapere di supportarla e ci sono tanti articoli, in merito, in giro per la rete; uno tra i più chiari ed esaurienti che ho trovato, lo potete leggere nel sito "constile.org".

In pratica, cosa stabilisce questa proprietà: "min-height" sta per "altezza minima" di un box e prevede che il box stesso possa poi espandersi oltre l' altezza specificata. Tornando al nostro codice scritto più su, dobbiamo far credere al browser che il corpo dell' elemento <body> ha la stessa altezza della finestra del browser, nonostante non ci siano molti "contenuti" da presentare a video.

Ma non è sufficiente solo questo codice. Dobbiamo inserire anche i selettori e precisamente il selettore figlio. Potrebbe essere necessario, come nel nostro caso, specificare una parentela diretta (padre - figlio) tra due elementi. Il codice di seguito riporta quanto appena scritto:

html>body, html>body #container{
height:auto;
}  

Come se la cosa fosse una novità, il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows e Mac; nonostante questa mancanza, ma non unica, procediamo ugualmente con la nostra applicazione.

Il "trucco" che rende di pari altezza il body e l' elemento #container, deve essere accompagnato dal posizionamento assoluto del footer. Al codice che è stato scritto precedentemente, si deve aggiungere il seguente:

#footer{ 
........... 
position: absolute;
bottom: 0; 
left: 0; 
} 

E con questo abbiamo terminato di arrabbiarci quando vorremo inserire il footer nonostante i contenuti non siano molti. La pagina di esempio mostra quanto abbiamo ottenuto. Le prove che ho effettuato, le ho visualizzate con Internet Explorer 5.0, 5.5, 6.0, Opera 8.53, Firefox 1.5.0.4, Mozilla 1.7.5; tutti per piattaforma Windows.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati