posizionare il footer in fondo alla pagina web

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:

  • Cau Graphic

    BUONA SERA IO AVREI UN PROBLEMA CON OIL FOOTER…CHE NON RIESCO POPRIO A CAPIRE DOVE E COME INSERIRLO INFONDO A DESTRA

    • Ciao, non è molto chiara la tua richiesta, cos’è che non capisci? dove bisogna inserire l’elemento footer o dove inserire il codice per posizionarlo in fondo a destra? Sentiti libero di pubblicare un’immagine per spiegarti al meglio 🙂

  • Ciao, a giudicare dalla disposizione delle colonne, il tema prevede una quarta colonna. Puoi provare a vedere in Aspetto > Widget se esiste una quarta colonna per il footer e aggiungere quello di cui hai bisogno.

    Se necessiti di ulteriori aiuto fammi sapere 😉

    • Cau Graphic

      si esiste una quarta colonna..ma il problema e che non so come scrivere un codice per metterlo li??