Un footer bloccato in fondo alla pagina con i CSS

Per chi non lo sapesse, e’ possibile avere un footer che rimane bloccato in fondo alla pagina, qualunque sia la sua altezza minima.

Credo di avere una soluzione che funziona oggi nel 2009, in molti browser, tutti i maggiori ed anche alcuni minori. In particolare Google Chrome continua a causare problemi ma con questa tecnica funziona anche con i layout a piu’ colonne flottanti.

Vediamo come funziona.

Una pagina che utilizza questa tecnica e’ www.cssstickyfooter.com. Se non la usasse, ci apparirebbe cosi’.

Questa soluzione funziona con un layout a due o piu’ colonne flottanti e non ha problemi con il ridimensionamento della pagina come succederebbe usando delle vecchie tecniche che potete trovare cercando sticky footer su Google. E non c’e’ bisogno di un <div> aggiuntivo vuoto, una soluzione che a livello di codice HTML risulta poco elegante.

Ci sono molte di tecniche che potete trovare. Ho provato molte di quelle che presenta Google e comunque ognuna di esse crea un qualche problema in un qualche browser. La causa principale e’ che sono tecniche progettate per browser di vecchia generazione e con le nuove versioni dei motori di rendering dei browser moderni hanno un mare di problemi. Siccome queste pagine sono vecchie e sono state molto linkate nel passato, a tutt’oggi vengono mostrate fra i primi risultati di Google.

La soluzione di Ryan Faits e’ ben conosciuta, e funziona ma richiede un <div> aggiuntivo privo di contenuto per dare una “spinta” al nostro footer.

La tecnica Sticky Footer presentata qui e’ basata su informazioni reperibili su Exploring Footers article from A List Apart e si applica bene anche a Google Chrome e altri browser dove il footer cambia posizione quando si ridimensiona la finestra. Risolve anche i problemi con layout a tre colonne. E’ stata testata in piu’ di 50 browser e funziona alla grande.

Il codice HTML

Qui abbiamo una struttura base di codice HTML. Da notare che il <div> footer e’ all’esterno del <div> wrap.

<div id="wrap">

	<div id="main" class="clearfix">

	</div>

</div>

<div id="footer">

</div>

Potete mettere il vostro contenuto all’interno del <div> main. Per esempio, se usate un layout a due colonne il codice sarebbe il seguente:

<div id="wrap">

	<div id="main" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

Un header puo’ essere inserito all’ interno del <div> wrap ma prima del <div> main:

<div id="wrap">

	<div id="header">

	</div>

	<div id="main" class="clearfix">

	</div>

</div>

<div id="footer">

</div>

Se volete inserire altri elementi fuori dal <div> wrap o dal <div> footer dovrete usare il posizionamento assoluto altrimenti cio’ creerebbe problemi nel calcolo del 100% dell’altezza.

Il codice CSS

Qui sotto abbiamo il codice CSS per bloccare il footer in fondo alla pagina.

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* la stessa altezza del footer */

#footer {position: relative;
    margin-top: -150px; /* valore negativo dell'altezza del footer */
    height: 150px;
    clear:both;}

Potete notare che il valore dell’altezza del footer viene usato tre volte. E’ importante che sia uguale in tutte e tre le ricorrenze. La proprieta’ height fa si che il <div> wrap si allunghi alla altezza piena della finestra. Il margine negativo del footer va a coprire il padding creato dal <div> main. Visto che main e’ all’interno di wrap, il padding fa già parte del 100% dell’altezza. Per questo motivo il footer si fissa in fondo alla pagina.

Ma non abbiamo ancora finito. Dobbiamo aggiungere la classe clearfix al <div> main.

Il Clearfix Hack Ci viene in aiuto

Molti designer avranno familiarità con il Clearfix Hack. Risolve molti problemi con gli elementi flottanti. Qui lo usiamo per fissare il footer in Google Chrome. Risolve anche il problema che si crea quando usiamo un layout a 2 colonne dove il contenuto flotta da una parte e il <div> laterale dall’altra. Gli elementi flottanti del <div> content possono far si che il footer non sia fisso in alcuni browser.

Quindi andiamo ad aggiungere al nostro CSS quello che segue:

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Nascondi a IE su Mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Fine Nascondi a IE su Mac */

Se preferite usare il metodo di Ryan Fait con l’extra <div> dovrete omunque aggiungere la classe clearfix se usate un layout a piu’ colonne flottanti.

Problemi conosciuti

Altezze e margini

Applicando margin superiori e/o inferiori all’interno di alcuni elementi, questi possono spingere il footer in basso per i valori dati ai margini, probabilmente anche se li date ai <div> header o wrap o main . Invece di margin usate padding per spaziare gli elementi. Vi potete accorgere del problema quando la vostra pagina ha poco contenuto e non raggiunge l’altezza massima della finestra: il footer che sta in basso va a creare spazio nella barra di scorrimento laterale del browser anche se non ce ne sarebbe bisogno. Trovate dove state usando margin e sostituitelo con padding.

State attenti anche se avete dato padding al vostro <div> main piu’ in basso nel vostro CSS. Se aggiungete una cosa tipo padding:0 10px 0 10px; sovrascriverete il valore piu’ importante che deve essere lo stesso dell’altezza del footer. Cio’ implica che il footer si andrebbe a sovrapporre al vostro contenuto in pagine particolarmente lunghe (in Goole Chrome).

Dimensione dei font

Quando dichiarate la dimensione dei font, se usate dimensioni relative ricordate che alcuni utenti potrebbero avere il loro browser settato per grandezze diverse da quelle aspettate. In alcuni elementi, tipo il footer stesso, questi valori arbitrari possono cambiare l’impostazione delle altezze da noi inserite e creare uno spazio sotto il footer se l’altezza impostata non e’ sufficiente a contenere il testo ingrandito. Consiglio quindi di usare dimensioni assolute come px invece di pt o em.

Funziona in questi browser:

---

Articolo originariamente pubblicato su www.cssstickyfooter.com e www.stever.ca, all rights reserved.

Tradotto con l’esplicito consenso dell’autore.

Thank you Steve!