Quasi tutti i designer/developer hanno avuto una “brutta” esperienza con un footer che non rimane in fondo alla pagina web.
Un’esperienza frustrante che si può risolvere con metodi diversi ma quasi tutti un po’ complessi.
Grazie a Flexbox (il nuovo metodo di impaginazione per creare layout flessibili) possiamo risolvere questo inconveniente con poche righe di codice.
Non ho intenzione di scrivere un lungo tutorial e spiegare cosa sia Flexbox dalle basi (realizzerò altri tutorial su questo strumento utilissimo), voglio soltanto darvi uno strumento rapido ed efficace per risolvere il problema del footer che non rimane in fondo alla pagina in relazione al contenuto.
Ho creato una pagina HTML semplicissima:
- Un header con un titolo ed un menu
- Un contenuto principale
- Il “famigerato” footer
Le proprietà che utilizzo, in questo caso, sono pochissime e semplici da applicare.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
}
Per prima cosa diamo al body un’altezza minima di 100vh, ciò significa che si svilupperà per tutta l’altezza della viewport (l’area di visualizzazione della pagina).
In secondo luogo applichiamo al body la principale proprietà di Flexbox, ovvero
display: flex;
questa proprietà rende il body un contenitore flessibile.
Terza proprietà per body è la direzione degli elementi del contenitore, in questo caso column per incolonnarli uno sull’altro.
L’ultima proprietà spetta al contenuto vero e proprio (.container), flex-grow a cui diamo il valore di 1 per stabilire che occuperà il 100% dello spazio a sua disposizione.
Nel CSS che troverete nella demo, ho inserito qualche altra proprietà per rendere un po’ più accattivante la pagina ma non ho voluto esagerare, in tal modo ci concentriamo su quello che oggi ci interessa di più, ovvero lo sticky footer con Flexbox.
Divertitevi a modificare, per esempio, la dimensione del footer aggiungendo del testo, noterete che si adatterà perfettamente al layout 😉
Links utili: CSS-Tricks
See the Pen Sticky footer with Flexbox by Eugenio (@rupertone) on CodePen.0
