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

Une deuxième 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 voir la première façon.

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 deuxième façon consiste à se servir de la marge négative pour forcer le bas de page à apparaître collé au bas du contenant principal.

Comme dans l’exemple précédent, il est bon de spécifier dans la feuille de style que l’on veut forcer les balises <html> et <body> à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut forcer le contenant principal « #wrapper » à être d’une hauteur minimum de 100 %. Le tout en prenant bien soin de créer un correctif pour permettre à tous les navigateurs
(sauf IE 6) de bien comprendre la syntaxe de la déclaration « height:auto ».
#wrapper { min-height: 100%; height: 100%; margin: 0 auto; /* sert à placer le contenant #wrapper au centre du navigateur */ } html>body #wrapper { height:auto } /* une des façons de cacher du style au navigateur Internet Explorer 6 */
Il faut maintenant ajouter au contenant une marge négative, ce qui va permettre de créer l’espace nécessaire pour le bas de page.
#wrapper { min-height: 100%; height: 100%; margin: 0 auto -50px; /* 50 pixels représente ici la hauteur souhaité de notre bas de page */ }
Pour terminer, il ne reste plus qu’à indiquer la hauteur du sélecteur de bas de page, ici identifié « #footer ». Cette hauteur doit correspondre à la marge négative de 50 pixels du contenant.
#footer { height:50px; }
Pour que tout fonctionne comme prévu, le bas de page doit se retrouver à l’extérieur du contenant principal. Il faut également créer un <div> vide au bas du contenant, ayant la même hauteur que le bas de page.
#espace { height:50px; }