Un footer sempre in fondo alla pagina grazie ai css

footerGrazie 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?


... qui il contenuto ...



Remember! Sticky footer!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
%d blogger hanno fatto clic su Mi Piace per questo: