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!
Post correlati
Lascia un commento
Istock photo
Sponsor Liquida
Sponsor e amici
I più commentati del mese
Consulenza legale
Oggi ti segnaliamo i seguenti link
Iscriviti alla newsletter!
Registrati al sito e al forum
Who's Online
Hai bisogno di un sito?
Lauryn.it, creatrice di Italianwebdesign, offre servizio professionale di webdesign, grafica, e-commerce, webmarketing, seo e posizionamento sui motori di ricerca.
Inoltre converte i tuoi layout grafici in xhtml e css e crea template per Wordpress personalizzati secondo esigenze di community, siti aziendali, blog professionali.
- Per informazioni: Lauryn.it
- Contatto email per preventivi gratuiti: info@lauryn.it
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!