Lorsqu’on crée un design dont la particularité est que le pied de page soit toujours au bas de l’écran, on se heurte à un petit soucis de conception : comment définir une hauteur minimale à la fenêtre ?
Nous allons voir une solution possible.
Tout d’abord, comprenons bien de quoi l’on parle dans ce tutoriel, et pour cela, nous allons d’abord illustrer le problème.
Lorsqu’un site possède une hauteur totale plus grande que l’écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu’au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou « footer » en anglais, est alors fixé naturellement au bas de la page et de l’écran.
Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l’écran, alors le pied-de-page, toujours placé au bas de la page, n’atteint pas le bas de l’écran.
Si certains design ne sont pas gênés par cette éventualité, ce n’est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l’écran, mais que la taille minimale de la page ne puisse pas être inférieure cette dernière.
Nous allons maintenant voir comment faire ceci.
Le html
Nous partons sur cette base html :
<body> <div id="page"> <div id="bloc-principal"> <div id="header"></div> <div id="contenu"> <div id="sidebar"></div> <div id="texte"></div> </div><!-- contenu --> </div><!-- fin bloc-principal --> <div id="footer"></div> </div><!-- fin page --> </body>
Ce n’est qu’un exemple de site de base ; vous pouvez bien sûr utiliser votre propre site.
Pourquoi mettre le pied de page (footer) en dehors du bloc principal ?
Toute l’astuce est là, c’est le fait de placer le pied-de-page en dehors du bloc du contenu qui va permettre de le fixer au bas de la page, mais aussi de l’empêcher de passer par-dessus le texte du contenu.
Le CSS en action
La première étape est donc de donner à <html> une hauteur de 100%, qui servira à définir pour les balises enfants à quoi correspondent les valeurs en pourcentage que nous allons leur donner par la suite. La première balise enfant étant <body>, nous lui attribuons également cette valeur.
html, body { height: 100% }
Il nous faut ensuite donner à notre conteneur principal, « page », une hauteur de 100%. Mais nous n’allons pas utiliser la propriété height, car celle-ci défini une hauteur définitive ; à la place, nous ferons usage de min-height, qui défini une hauteur minimale pour le conteneur : Ainsi, Si la fenêtre est plus grande que la page, alors le conteneur prendra toute la hauteur disponible, mais ne sera jamais plus petite que 100% -soit la taille du contenu de la page- et ne chevauchera donc jamais ledit contenu.
Il faut également préparer le positionnement du pied-de-page au bas du conteneur, aussi nous appliquons un paramètre de position relative à page.
#page {
min-height: 100%;
position: relative;
}
Nous passons maintenant au conteneur bloc-principal. L’astuce consiste à lui attribuer une marge interne de la hauteur du pied-de-page (ici, 100px). Cela a pour but de bien définir la fin du conteneur à la fin de son contenu. Sans ce paramètre, vous vous rendrez compte que le pied-de-page se superposerait au bas du contenu sur 120px, soit sa propre hauteur.
#bloc-principal {
padding-bottom: 100px;
}
Maintenant, nous nous attaquons au pied-de-page. Il faut que celui-ci ait tout d’abord une hauteur définie (même s’il s’agit d’un pourcentage), puis il faut lui affecter un positionnement absolu. Comme son parent direct, le conteneur page, est en positionnement relatif, footer se sert de cette référence pour savoir où se positionner. Enfin, grâce au positionnement absolu, il suffira d’accrocher le conteneur au bas du bloc parent. On ajoute également left et right afin que le bloc prenne toute la largeur.
#footer {
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Et nous y voici ! Il est à noter que le pied de page doit avoir du contenu pour être affiché, à cause de son positionnement absolu.
Si vous souhaitez réagir à ce tutoriel, n’hésitez pas à laisser un commentaire !