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?
<html>
<body>
<div id="wrapper">
... qui il contenuto ...
<div class="pushfooter"></div>
</div>
<div id="footer">
... qui il footer ...
</div>
</body>
</html>
Remember! Sticky footer!
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
17 Commenti
Trick molto utile, grazie mille
Il metodo lo conoscevo ma averlo qui è stracomodo, thanks <3
Conoscevo questo metodo, ma ho sempre trovato un piccolo difetto rispetto alla tabella con “height 100%”: su Internet Explorer (6 o 7), se si ridimensiona la pagina, il footer non si adatta alle nuove misure e resta fermo nella sua ultima posizione. Bisogna dare un colpo di “aggiorna” per riposizionarlo correttamente.
@daniele: hai fatto bene a segnalarlo. però dai, è sorvolabile se ci pensi, anche perchè il ridimensionamento della finestra del browser è una cosa tipicamente macintoshiana, i windowsiani non lo farebbero volutamente.
ringrazio ancora sadegraphic
Sì, è un dettaglio di poco conto, anche se per il mio modo di operare, faccio spesso ridimensionamenti di finestre (anche su Windows), per questo mi è saltato subito all’occhio il difetto.
Ciao!
Sono contenta di essere stata di aiuto, lo faccio con piacere, eppoi tutte le risorse che trovo qui mi hanno aiutata tantissimo!
Lo uso spessissimo anche io ma mi sono accorta che per footer molto alti e corpi piccoli, la combinazione IE7+Vista è terribile perchè se nel corpo hai dei link vengono “nascosti” (cioè si vedono ma non si cliccano) dal push….
Grazie mille a Sadegraphic e a italianwebdesign per averlo pubblicato! tra le varie soluzioni che avevo trovato online, questa è l’unica che funziona su un complicato tema liquido per wordpress!
Ottimo consiglio, grazie!
Grande.. proprio quel che mi serviva! Grazie mille
a me non funziona
la mia pag è questa:
#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 */
}
…test test test test …
scusate ma il form qui elimina giustamente i tag html
cmq
ve lo riscrivo mod i tag
html
style type=”text/css”
#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 */
}
/style
body
div id=”wrapper”
… qui il contenuto …
div class=”pushfooter” /div
/div
div id=”footer”
/div
/body
/html
div id=”footer”
…….. qui c’è un include php per il footer
/div
Funziona anche con IE7?
Uhmm… no, non mi funziona, il footer mi rimane fermo a metà pagina, sotto i contenuti del wrapper >_<
A posto, sono riuscito a fondere il sistema del wrapper sullo schema del sito sul quale stavo lavorando! ^^
[...] :http://www.italianwebdesign.it/un-footer-sempre-in-fondo-alla-pagina-grazie-ai-css/ html,body{ height:100%; } #wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 [...]