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.