HTML/CSS: fare piè di pagina appiccicoso

Inviato da Webmaster il Agosto 24, 2011 - 23:11

Una delle funzioni più ricercate su Internet: il piè di pagina che rimane in basso della pagina. E incredibile quanto sia facile fare questo piè di pagina funzionare perfettamente ma sembra difficile riuscire a farlo bene. Sul mio esempio farò un piè di pagina che rimarrà in basso della pagina quando il contenuto non supera l'altezza di questa. Andrà più in basso, se il contenuto è più grande e lo spinge verso il basso (cioè: il piè di pagina non coprira mai il contenuto).

Il contenuto HTML

<html>
<body>

<div id="contenutoprincipale">
Contenuto principale.
</div>

<div id="piedipagina">
<p> Contenuto del piè di pagina </p>
</div>

</body>
</html>

Il codice HTML contiene una tag div chiamata "contenutoprincipale". Il contenuto principale della pagina effettivamente spinge verso il basso il piè di pagina. Il tuo piè di pagina viene messo in un tag div identificato come "piedipagina". Questo ci permette di dare istruzioni specifiche in CSS su come questo piè di pagina si deve comportare.

Le configurazioni CSS

html, body {
height: 100%; /*fa la pagina occupare tutta l'altezza*/
}

* {
margin: 0;  /*le margini potrebbero rovinare tutto*/
}

#contenutoprincipale {
height: 100%;  /*spinge il piè appiccicoso sul fondo */
}

#piedipagina {
  height: 50px; /* regola l'altezza del piè di pagina */
  margin-top: -50px;/* questi numeri devono essere opposti */
}

Potete modificare questi parametri, i commenti sono abbastanza espliciti su come i cambiamenti rifletterebbero sulla pagina. Ora basta sperimentare e divertirsi!


Aggiungi un commento