Garder le footer en bas de page avec flex en CSS
Quelle que soit la hauteur de la page, grâce à flex et min-height !
Publié le 26 avril 2024 par Pierre Guézennec
Dans la construction d'une page web classique en HTML / CSS, constituée de plusieurs éléments comme l'en-tête (header), le contenu et autre, et d'un pied de page (footer), on aura tendance à vouloir coller le footer tout en bas de la page, quelle que soit la hauteur du contenu.
Problème : si le contenu n'est pas assez haut pour pousser le footer tout en bas de la zone affichée (viewport), il y aura un vide entre le footer et le bas de la page.
Pour corriger cela, j'utilise presque systématiquement une méthode simple et propre, grâce à la propriété flex. On part du principe que le contenu est constitué d'une ou plusieurs balises (header, main, div...) et d'une balise pour le footer (footer, div...).
Affichage flex pour le body
La balise body doit prendre le mode d'affichage flex avec une direction en colonne, afin que ses enfants (header, main, footer...) restent naturellement place les uns sous les autres. Cela n'impacte pas l'affichage pour le moment.
body { display: flex; flex-direction: column; }
Occupation de toute la hauteur du viewport
La balise body doit occuper au minimum toute la hauteur de la zone affichée (viewport). Cela n'impacte toujours pas l'affichage, car même si le body occupe désormais toute la hauteur du viewport, rien ne pousse le footer plus bas que nécessaire.
On utilise l'unité de mesure vh qui est un pourcentage de la hauteur du viewport.
body { min-height: 100vh; }
Hauteur minimale du contenu
Dernière étape, il suffit d'assigner la propriété flex-grow assignée à la balise du contenu (main, div...), pour lui indiquer de prendre toute la hauteur disponible restante de son conteneur (body) qui, grâce à l'étape précédente, est au minimum la hauteur du viewport.
main { flex-grow: 1; }
Vanilla CSS
Assez parlé, voici un exemple de code complet en CSS classique avec le HTML associé :
1body {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5}
6main {
7 flex-grow: 1;
8}
1<body>
2 <header>Logo, navigation...</header>
3 <main>Contenu de la page</main>
4 <footer>Pied de page</footer>
5</body>
Tailwind CSS
Pour celles et ceux qui ont choisi d'utiliser le framework Tailwind CSS, voici les classes à utiliser :
1<body class="flex flex-col min-h-screen">
2 <header>Logo, navigation...</header>
3 <main class="grow">Contenu de la page</main>
4 <footer>Pied de page</footer>
5</body>