Un footer sempre in fondo alla pagina grazie ai css

Grazie alla nostra lettrice Sadegraphic ieri ho scoperto un trucchetto css per risolvere un problemino per il quale suggerivo ancora l’uso delle tabelle come ultima chance. Ora però davvero non ci sono scuse, e ringrazio davvero Sadegraphic che ha trovato questo trick.

Vi sarà certamente capitato di dover inserire un footer che fosse sempre in fondo alla pagina anche se questa aveva pochi contenuti, adattabile a seconda di risoluzioni e browser. L’unico modo per farlo era di usare una table con height:100%, mentre usare lo stesso valore con i div non funzionava. Ora si può ed è semplicissimo.


html,body{
height:100%;
}
#wrapper{
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -100px; /* margine negativo altezza footer */
}
.pushfooter{
height:100px; /* altezza footer */
clear:both; /* clear di eventuali float se presenti nel layout */
}

L’html prevede un wrapper, un footer, e il pushfooter lo si posiziona all’interno di wrapper prima della sua chiusura 😉 Semplice no?




Remember! Sticky footer!