Effetto rivela Footer con 7 linee di CSS

Come si ottiene questo semplice effetto di “rivelazione del footer”?  Bastano poche righe di codice… Per quanto riguarda l’HTML:

<section id="contenitore">
    contenuto
</section>
<footer id="footer">
    footer
</footer>

Lato CSS invece si gioca tutto sull’uso di position fixed, z-index e margine del contenuto che “spingerà” per finta il footer per poi svelarlo

#contenitore {
    position: relative;
    margin-bottom: 200px; /* altezza footer */
    z-index: 1000; /* maggiore del footer */
}
#footer {
    position: fixed;
    bottom: 0px;
    z-index: 999; /* minore del contenitore */
    height: 200px; /* margin-bottom del contenitore */
}

Pro e contro?

PRO: l’effetto è molto gradevole e, data la struttura HTML richiesta, applicabile praticamente ovunque senza necessità di aggiungere/rimuovere contenitori al layout diversi da footer e contenitore principale.

CONTRO: la gestione responsive. Avendo un’altezza fissa associata al footer, dovremo deciderne le dimensioni per i vari breakpoints. In alternativa con jQuery andiamo a calcolare dinamicamente l’altezza del footer (e quindi il margin bottom del contenitore) al resize della finestra.

Questo è quanto 🙂