CSS: la tecnica dei footer sticky demistificata

Short link

Quello che non viene mai detto sui footer sticky (sempre in fondo alla pagina) realizzati con i CSS è cosa accade quando si aggiunge più contenuto del necessario al contenitore principale. Le soluzioni presentate sono tutte simili, ma in quasi tutte non viene specificato questo particolare. In altre parole, il successo di questa tecnica CSS dipende da un fattore che è impossibile gestire con i CSS stessi: l'altezza dinamica dei contenuti. Vediamo perchè.

La struttura HTML è quasi sempre come la seguente:


<body>
<div id="wrapper">
	<!--contenuto principale-->
</div>
<div id="footer">
	<div id="footer-inner"><!--contenuto del footer--></div>
</div>
</body>

La tecnica CSS applica un margine inferiore negativo al contenuto principale pari all'altezza dichiarata del footer:


* {
    margin: 0;
}
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
    padding: 0 1em;
}

#footer, #footer-inner {
    height: 2em;
    background: #000;
    color: #fff;
}​

Con poco contenuto questa tecnica funziona, ma se provate ad aggiungere più contenuto noterete che ad un certo punto i contenuti principali si sovrappongono al footer in virtù del margine negativo applicato.

Quindi la tecnica è efficace se e solo se conosciamo in anticipo l'altezza intrinseca dei contenuti. E questo è un qualcosa che i CSS non possono gestire da soli perchè non dispongono di operatori condizionali che agiscono sugli elementi della pagina.

Test

CSS: footer sticky

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.