Impostare il footer sempre in basso nella pagina
5 su 3 voti
Tempo di lettura: Meno di 1 minuto

Impostare il footer sempre in basso nella pagina

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:

<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:

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.