Un problema che si ripete molte volte per chi crea layout o smanetta con css e html è impostare il footer fisso sempre nella parte inferiore del browser.
Oggi vi mostrerò come impostarlo con poche righe di codice.
Codice Html:
1 2 3 4 | <div id="container"><div id="content"><!-- contenuto --></div></div><div id="footer">Footer</div> |
Dove container è il div che contiene l’intero sito, content è appunto per il contenuto vero e proprio del sitoweb, e il div footer contiene tutte le informazioni a piè di pagina.
Il css che va applicato per fare in modo che il nostro footer resti sempre in fondo alla pagina, a prescindere dal content ( contenuto del sito ) è questo:
1 2 3 4 | html,body {height:100%; margin: 0;}#container {min-height:100%;height:auto !important; /*per gli altri browser*/height:100%; /*per IE 6*/ margin-bottom:-50px;}#content { padding-bottom:50px; }#footer{height:50px;width: 100%;background: #00A2FF url(bgfooter.jpg) repeat-x;} |
Ricordate solo che in base all’altezza del footer, lo stesso numero deve essere impostato per margin-bottom di #container
ps. ovviamente non dimenticarti di caricare il css dal file html
Commenti
Recensioni