Footer sempre in fondo
Comments(5) Il footer, per definizione, è quell’elemento che chiude la pagina e si pone alla fine dei contenuti. Quando però il contenuto è più corto dello spazio disponibile a video – il viewport – il footer si “solleva” dal bordo inferiore della pagina, lasciando uno spazio più o meno grande al di sotto di esso. L’effetto in certi casi può essere poco gradevole, dando l’impressione di un layout “tagliato a metà”. Potete vedere qui un esempio…
Il footer dovrebbe invece disporsi allineato al bordo inferiore della pagina nel caso citato, mentre dovrebbe posizionarsi in fondo al contenuto, oltre lo scroll, se questo è sufficientemente lungo da riempire tutto il viewport. Per farvi un’idea date un’occhiata qui e qui.
Una soluzione valida, compatibile con tutti i moderni browser, è quella di utilizzare la proprietà css min-height per imporre l’altezza minima del contenuto tale da farlo ampliare fino a riempire con il viewport.
Ma procediamo con ordine. Il layout standard potrebbe essere questo:
<body> <div id="container"> <div id="header"> Header </div> <div id="content"> Content </div> </div> <div id="footer"> Footer </div> </body>
Tramite css impostiamo l’altezza minima del container al 100% in modo da farlo occupare tutto lo spazio verticale disponibile. L’altezza viene però calcolata in base a quella degli elementi contenenti il div, quindi dobbiamo impostare al 100% sia il tag body che il tag html:
html, body {
height:100%;
}
#container {
min-height:100%;
}
In questo modo però il footer andrà a posizionarsi fuori dall’area visibile (oltre il 100%, per intendersi): occorre quindi recuperare lo spazio necessario. Per farlo utilizziamo un semplice margine negativo pari all’altezza voluta del footer (in pixel o em, come preferite):
html, body {
height:100%;
}
#container {
min-height:100%;
margin-bottom:-100px;
}
Ora però dobbiamo impedire al contenuto di finire sotto al footer che abbiamo portato in primo piano. Aggiungiamo perciò un padding inferiore al content in modo da distanziarlo a sufficienza: è importante quindi che abbia almeno lo stesso valore. Se vogliamo aggiungere un ulteriore spazio basta addizionarlo: (ad es. 110px per un padding inferiore apparente di 10px).
html, body {
height:100%;
}
#container {
min-height:100%;
margin-bottom:-100px;
}
#content {
padding-bottom:100px;
}
Se provate la pagina con un browser come Firefox o Safari noterete che abbiamo già ottenuto l’effetto desiderato. La proprietà min-height però non è supportata da Internet Explorer 6. Possiamo risolvere facilmente con il noto l’hack che utilizza la proprietà !important. Aggiorniamo quindi il css ed abbiamo finito:
#body {
height:100%;
}
#container {
min-height:100%;
height:auto !important; /*per gli altri browser*/
height:100%; /*per IE 6*/
margin-bottom:-100px;
}
#content {
padding-bottom:100px;
}
Ecco quindi l’esempio finito con poco o molto contenuto. Potete in alternativa scaricare lo zip con i sorgenti.
Ho aggiunto qualche altra istruzione per evidenziare header e footer, ma il css di base è lo stesso.
Bellissimo tutorial!
Complimenti!
fantastico, finalmente qulcuno che fa degli esempi quando spiega qualcosa, grazie mille!!
Sembra che funzioni e da paura anche!!
Ho visto molti post sull’argomento e le soluzioni che funzionano meglio sono super-arzigogolate, qui invece funziona alla grande ed è super semplice.
Bravo, grazie
complimenti per il tutorial… spiegato benissimo con esempi espliciti… ho provato altri tutorial non ci sono riuscito con questo funziona tutto grande
Grazie dei commenti, sono felice di esservi utile!