HTML/CSS: pied de page qui colle en bas de la page

Soumis par Webmaster le Août 2, 2011 - 18:52

Le pied de page qui reste en bas de la page parmi les fonctionnalités les plus recherchés sur le net. C'est incroyablement facile à mettre en place mais reste parfois difficile à parametrer correctement. Dans cet exemple je vais faire un pied de page qui reste en bas de la page tant que le contenu n'excède pas la hauteur de la page. Si le contenu excède la hauteur de la page alors le pied de page accompagnera le contenu (pour ne jamais se trouver au dessus et cacher le contenu).

Le contenu HTML

<html>
<body>

<div id="contenuprincipal">
Contenu principal.
</div>

<div id="pieddepage">
<p> Contenu du pied de page. </p>
</div>

</body>
</html>

Ce code HTML contiend une balise div appelée “contenuprincipal”. Le contenu principal de la page va pousser le pied de page vers le bas. Le pied de page sera mis dans une balise div qu'on appellera “pieddepage”. Ceci nous permettera de donner des instructions CSS spécifiques à chaque élément pour déterminer comment le pied de page devera s'afficher.

Les instructions CSS

html, body {
height: 100%; /*fait en sorte que la page occupe tout l'espace*/
}

* {
margin: 0; /*les marges pourraient tout gâcher*/
}

#contenuprincipal {
height: 100%; /*pousse le pied de page vers le bas*/
}

#pieddepage {
  height: 50px; /*pour ajuster l'hauteur du pied de page*/
  margin-top: -50px;/*ces chiffres doivent être opposés*/
}

Vous pouvez librement modifier ces paramètres, les commentaires sont là pour explique l'effet de chaque élément. Maintenant expérimentez et amusez vous !


Ajouter un commentaire