Ciao a tutti e ben ritrovati! Condivido con voi una chicca di CSS che sicuramente chi fa sviluppo web apprezzerà.

La problematica che andremo a risolvere è la seguente: come fare in modo che se il contenuto di una pagina web non giunge a fondo finestra, l’altezza minima sia comunque il 100% della stessa e il footer sia mostrato in fondo?

La soluzione ha un nome: sticky footer.

La struttura della nostra pagina sarà la seguente:

  • div di classe “wrapper” contenente la nostra pagina web.
    • div di nome “spacer” prima della chiusura di wrapper.
  • div di classe “footer” appena dopo il div wrapper.

Le regole CSS che ci permetteranno di ottenere l’effetto sono le seguenti:

Tutto qui! Basterà sostituire il valore 142 con l’altezza del footer e quest’ultimo apparirà al fondo della pagina anche quando il contenuto finisce prima. Se la pagina è più lunga della finestra, il piè pagina apparirà comunque alla fine.

Sono poche righe di CSS, ma davvero utili per dare ai nostri siti web un aspetto più professionale.