L'une des missions récurrentes dans notre métier est celle de produire un gabarit dont le pied de page est toujours positionné en bas de la fenêtre, même si le contenu ne l'atteint pas.
En règle générale, la première mission est d'appliquer une hauteur de 100% sur le corps de page, ce qui n'est pas toujours une paire de manche.
En effet, en attendant une compatibilité universelle des unités de Viewport (vh, vw, vmin et vmax), nous devons nous contenter d'appliquer une hauteur (ou hauteur minimum) de 100% à l'ensemble de la chaîne des éléments en commençant par <html> :
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
À la suite de quoi, le pied de page (ici <footer>) pourra se positionner en absolu au bas de son référent <body> de cette manière :
body {position: relative;}
footer {position: absolute; bottom: 0;}
Si vous souhaitez en outre que le pied de page occupe toute la largeur, il suffit de le positionner à la fois à gauche et à droite :
body {position: relative;}
footer {position: absolute; bottom: 0; left: 0; right: 0}
Une superposition indésirable !
Le souci avec cette technique est que le contenu de votre page risque de se chevaucher avec le pied de page qui se trouve superposé par-dessus.
Pour éviter ce chevauchement de contenu, il est nécessaire de "réserver" de l'espace (du padding) en bas de <body>. Par exemple un padding-bottom de 5em si mon pied de page a une hauteur de 5em.
Mais cela entraîne un nouveau problème conséquent : la zone de padding s'ajoute à la taille d'un élément. <body> occupe à présent une hauteur de... 100% + 5em :/
La solution réside dans la propriété CSS3 box-sizing, heureusement reconnue par l'ensemble des navigateurs depuis IE8 :
* {-moz-box-sizing: border-box; box-sizing: border-box;}
Appliquée à l'ensemble des éléments, box-sizing va limiter la hauter de <body> à 100%. Bingo !
La magie du rendu tabulaire
Le modèle tabulaire en CSS offre de très belles perspectives à travers les différentes valeurs de display reconnues depuis IE8.
Grâce à display: table et à display: table-row, nous pouvons conférer aux éléments des rendus et comportements de lignes de tableaux.
Ces quelques lignes suffisent à résoudre très rapidement notre problème :
html, body {
height: 100%;
margin: 0; padding: 0;
}
body {
display : table;
width: 100%;
}
footer {
display : table-row;
height: 100px; /* à titre d'exemple */
}
Contraintes du média, contraintes d'accessibilité
Le média Web n'est pas paginé comme le média Print. Les concepts de page, de pied de page, etc., n'existent pas vraiment: sur un document web il n'y a pas de limite verticale; on utilise l'ascenseur (barre de défilement vertical). Cette spécificité du média explique qu'il est relativement difficile de créer un «pied de page» équivalent à ce que l'on trouve sur papier. Une solution simple pour régler ces histoires de pied de page est donc de s'adapter au média, et de laisser les informations et liens secondaires se placer naturellement à la suite du contenu de la page.
De plus, positionner un contenu tout en bas de page lorsque le reste du contenu de la page est court peut poser des problèmes d'accessibilité. Dans le cas où cela génère un espace vide entre la fin du contenu et le pied de page, un utilisateur de loupe d'écran ne verra probablement pas le pied de page, et pensera que ce vide correspond à la fin du contenu.
Cette contrainte se fait davantage ressentir avec l'avènement des smartphones et de la navigation "nomade".