posizionare il footer in fondo alla pagina web

Come posizionare il footer in basso con CSS

Pubblicato su 30 ottobre, 2014 da Manuel Ricci in Web Design

Un problema che affligge molti web designer è il posizionamento del footer in fondo alla pagina quando il contenuto non è sufficientemente lungo da permetterlo “naturalmente”.

Anche io ho avuto a che fare con questo flagello, forse per un’innata inclinazione per la scienza ho sempre sperimentato nuovi modi per posizionare il footer in fondo alla pagina. Dopo un sacco di esperimenti, miseramente falliti, sono giunto finalmente alla formula CSS definitiva per posizionare il footer in fondo alla pagina web. Con questa formula potete dire addio ai clearfix, hack strani e agli stratagemmi dalle sfumature esoteriche che avete usato fino ad ora e dare il benvenuto alla proprietà display:table.

Hey, aspetta… tabelle? Ebbene sì. La risposta ai problemi di noi innocenti web designer la troviamo in quella proprietà che molti di noi non sopportano, le tabelle.

Ironicamente la soluzione risiede nella matematica, più precisamente nella tabella dei segni, dove due cose negative (un footer che non vuole sentire ragioni per posizionarsi in fondo alla pagina e le tabelle) danno come risultato qualcosa di positivo.

Due parole sulla proprietà display:table

Le basi fondamentali sul linguaggio CSS le ho apprese grazie alle guide pocket dell’Apogeo, in seguito le ho rafforzate con i libri di Eric Meyer editi O’Reilly. Oltre alla formazione cartacea, progetti scolastici e lavoretti in ritenuta d’acconto mi hanno permesso di rafforzare ulteriormente le mie conoscenze sui fogli di stile, ma mai avevo capito la sottile differenza che divide l’elemento HTML <table> dalla proprietà CSS table.

Sostanzialmente la differenza è una:

si può scegliere di non essere una tabella semplicemente aggiustando le proprietà CSS, mentre le tabelle HTML sono incapaci di evolversi in qualcosa di diverso da se stesse.

Pensa, sfruttando la proprietà table del codice CSS, saresti in grado di creare tabelle responsive con uno schiocco di dita oppure potresti posizionare il footer con estrema facilità in fondo alla pagina web. Tutto questo modificando il CSS e non l’HTML.

Ora ho finito con le chiacchiere ed è giunto il momento di passare all’azione.

Il markup

Per prima cosa creiamo il markup della nostra pagina web

Il div con la classe main è un contenitore vuoto che mi permetterà di dimostrare il funzionamento del posizionamento del footer.

Incolliamo il footer

Allora ragazzi, prendete della colla vinilica e delle porporina…fatto? Bene ora incolliamo il footer in fondo alla pagina web.

Ok, vi ho illuso come il titolo di una puntata di dragonball, chiedo scusa!

Il codice che ho riportato qui sopra è un “reset”, rimuove i margini e il padding da tutti gli elementi e applica un’altezza del 100% agli elementi html e body (essenziale per la buona riuscita del tutorial).

Ora giuro che arriva la soluzione al vostro cruccio

Solamente a guardarlo, questo snippet mi commuove. Analizziamolo.

L’elemento body è il padre di tutti, quindi bisogna assegnargli la proprietà  display:table. La proprietà assegnata all’elemento con classe main è superflua, a meno che tu non desideri rendere il tuo sito web retro compatibile con le versioni precedenti di Internet Explorer (testate: 5 e 7). Infine, l’elemento con classe footer si comporta come l’elemento <tr> e cioè come riga della tabella, l’altezza di 1px limita l’estensione indesiderata del footer.

Risultato

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”HsyFl” default_tab=”result” user=”manuelvrc”]See the Pen HsyFl by Manuel Ricci (@manuelvrc) on CodePen.[/codepen_embed]

Hai visto quanto è semplice posizionare il footer? Cosa ne pensi?

Prima di salutarti ti lascio degli ulteriori approfondimenti in merito alle cose affrontate oggi: