Créer un bas de page qui colle grâce à CSS (1)

Voici une première façon pour garder, avec l’aide de CSS, le bas de page positionné au bas du navigateur quelque soit la hauteur de la page.

Pour vous aider à réaliser cet exemple, vous pouvez télécharger le code HTML qui vous servira de matière première tout au long du présent exercice. Comme vous pourrez constater, j’ai déjà formaté le document en y insérant du style dans la balise <head>.

Cette première façon consiste à se servir du positionning pour forcer le bas de page, alors en mode absolute, à toujours suivre le bas de l’écran. C’est une méthode simple et efficace mais elle nous oblige par contre à nous servir du positionnement, ce qui peut parfois ne pas convenir au type de page que nous avons à coder.

Pour commencer, il est bon de spécifier dans la feuille de style CSS que l’on veut forcer les balises <html> et <body> à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut mettre tout le contenant de la page, ici appelé « #wrapper », en position relative et lui donner une valeur minimale de 100 % pour sa hauteur.
#wrapper { position: relative; min-height: 100%; }
Étant donné que la déclaration « min-height » n’est pas comprise par Internet Explorer 6 ni les versions antérieures, l’ajout d’un filtre correctif dans la feuille de style est essentiel.

Note : Le * html placé devant le nom du sélecteur concerné ne rend visible la déclaration que pour les versions 6 et plus anciennes d’Internet Explorer mais n’est pas visible pour la version 7 et plus récente.
* html #wrapper { height: 100%; }
Pour terminer, il ne reste plus qu’à positionner le sélecteur du bas de page, ici identifié « #footer », en position absolue et à attribuer une valeur nulle (0) à la coordonnée du bas :
#footer { position: absolute; bottom: 0; }
Puisque le bas de page se retrouve en position absolue, il est toujours bon de spécifier les dimensions exactes de celui-ci.
width:560px; /*600 pixels moins les 20 pixels de chaque côté*/
Sur ce, à bientôt !