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
Affinchè 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 ad 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%;
}
Nell'esempio possiamo vedere il footer in fondo alla pagina con position absolute.
Footer in fondo alla pagina con il div aggiuntivo
Rispetto alla soluzione precedente, in questo caso bisogna aggiungere solo un nuovo div, con classe .push, oppure altro nome, 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 negativo del div .container.
Nell'esempio il footer in fondo alla pagina con il box aggiuntivo.