Uno dei problemi che si presenta, in fase di realizzazione di pagine web, è il posizionamento del footer in fondo alla pagina quando il contenuto non è sufficientemente lungo da permetterlo “naturalmente”. E' normale che se il contenuto della pagina è minore dell'altezza della finestra del browser, ci si ritrova con il footer a metà della pagina stessa. In giro per il web ci sono tantissime soluzioni che, spesso, implicano codici CSS aggiuntivi per risolvere tale problema oppure, adottano la soluzione peggiore: una tabella con altezza impostata al 100%.
Tra le diverse scuole di pensiero, in merito all'oggetto dell'articolo, ho provato due tecniche di semplice ed immediata soluzione. La prima prevede la semplice adozione del position: absolute
da assegnare al footer. La seconda consiste nell'inserire un div
aggiuntivo prima del footer. Cominciamo a vederle separatamente.
Footer in fondo alla pagina con position: absolute
Affincè il footer venga positionato in fondo alla pagina, basta adottare poche e semplici regole CSS. La demo che verrà proposta, contiene pochi elementi, quali:
- un container con altezza e larghezza 100% che racchiude il tutto
- una header
- contenuti testuali
- footer
La prima ed importante regola del codice CSS, è la seguente:
html, body, .container{ height: 100%; margin: 0; padding: 0; }
Serve impostare l'altezza dei tre elementi - html, body, .container
- pari al 100%. Il footer, come detto, avrà il seguente codice:
.footer { position: absolute; bottom: 0; left: 0; width: 100%; }
Footer in fondo alla pagina con il div aggiuntivo
Rispetto al layout dell'esempio precedente, bisogna aggiungere solo un nuovo div
, con ID #push
, immediatamente prima della chiusura del div.container
. Il footer
va posizionato dopo il div.container
. All'esterno di questo.
Lo schema html sarà:
<div class="container"> <div class="header"> </div> <div class="content"> </div> <div id="push"> </div> </div> /*end container*/ <div class="footer"> </div>
Il codice CSS è il seguente:
html, body { height: 100%; } .container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px; } .footer, #push { height: 100px; }
Come possiamo vedere, deve essere impostata un’altezza pari al 100% per gli elementi html, body e .container. Il div .container
ha come impostazione l'altezza minima per essere compatibile con tutti i browser. Al termine abbiamo la dichiarazione dell'altezza vera e propria del footer. Stesso valore va assegnato al div #push
. Cosa vuol dire questo codice? Il margine negativo al div .container
, serve per fare spazio al footer che riceve una spinta verso il basso pari all'altezza del div #push
, del .footer
e del margine del div .container
.