Sticky footer: posizionare il footer con i CSS

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%;
}

Il file di esempio.

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.

L'esempio con tale tecnica.