Comment fixer un footer en bas de page est une question qui m’est fréquemment posée en formation. Il existe plusieurs techniques pour réaliser cela. Nous allons nous intéresser à deux méthodes modernes (flexbox CSS et grid CSS) qui vont nous permettre de placer un footer en bas de page même si la quantité du contenu de cette dernière est insuffisant.
Comment fixer un footer en bas de page même si le contenu est insuffisant ?
Un site est très souvent divisé en trois zones principales. En haut nous avons le <header> qui reçoit généralement le logo du site et la barre de navigation qui nous permet de aller de page en page. Au milieu, nous trouvons le <main>, la zone principale où nous plaçons le contenu le plus important à destination des futurs visiteurs du site. Enfin, le <footer> en bas de page qui recueille classiquement le copyright et des liens secondaires tels les CGU et CGV par exemple. Toutefois, si le contenu placé dans la zone du <main> est inférieur à la hauteur de l'écran sur lequel il s'affiche, le footer ne reste pas fixé en bas de page, mais remonte, laissant un espace béant et peu esthétique sous celui-ci. Ce phénomène est particulièrement visible sur des grands écrans de type ordinateur de bureau.
Comme on peut le constater, le footer n'est pas fixé en bas de page
Fixer un footer en bas de page grâce au flexbox CSS
La première méthode que nous allons utiliser pour fixer un footer en bas de page repose sur le module flexbox CSS. C'est une méthode de mise en page basée sur un axe principal (le main axis) qui permet de disposer des éléments en ligne ou en colonne en fonction de la direction choisie pour cet axe. Si vous souhaitez en savoir plus sur ce module, je vous invite à lire l'excellent article Le guide complet du flexbox sur le non moins excellent site Lacascade.io.
Classiquement, le code HTML de base d'une page ressemble à cela :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Footer en bas de page - Méthode Flexbox CSS</title>
<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
<header>
HEADER
</header>
<main>
MAIN
</main>
<footer>
FOOTER
</footer>
</body>
</html>
On y retrouve les trois zones définies plus haut : le <header>, le <main> et le <footer>. Pour disposer des éléments en ligne ou en colonne le module flexbox à besoin de la structure suivant : Un conteneur flex et des flex-items placés à l'intérieur. Ici tout se passe principalement au niveau de la balise <body>. Cette dernière va jouer le rôle de conteneur flex. Le <header>, le <main> et le <footer> vont jouer le rôle des flex-items.
Une fois la structure HTML adoptée, passons maintenant au CSS et appliquons les propriétés spécifiques au module flexbox sur la balise <body>. Voici le code :
body{
/**** CEST ICI QUE CA SE PASSE ****/
display: flex;
flex-direction: column; /*Fait pivoter l'axe principal à la verticale*/
height: 100vh; /*Pour que la propriété flex-grow agisse sur la verticale,
il faut donner une hauteur au body.
L'unité vh (pour viewport height) permet de s'assurer que le body fera
bien toute la hauteur de la surface d'affichage du navigateur*/
/**********************************/
/*Choix d'une police, mais n'a aucun effet sur le placement du footer*/
font-family: Arial, Helvetica, sans-serif;
margin: 0; /*à mettre si pas de normalize.css*/
}
main {
flex-grow: 1; /*Force la balise <main> à occuper tout l'espace
entre le <header> et le <footer>*/
}Quelques explications s'imposent. La propriété display associée à la valeur flex transforme notre balise <body> en conteneur flex et applique un axe principal (virtuel). Par défaut celui-ci est en position horizontale. Par conséquent, si nous nous arrêtons ici, nos trois flex-items se placent l'un à côté de l'autre (cf. l'image d'illustration). Ce n'est bien évidemment pas ce que nous voulons. Nous souhaitons que les trois balises restent en dessous. Pour cela, nous devons basculer l'axe principal en position verticale. C'est le rôle de la propriété flex-direction associée à la valeur column. Dès lors, nos trois flex-items se replacent l'un en dessous de l'autre. Toutefois, notre balise <footer> n'est toujours pas en bas de page...
Si nous n'appliquons pas les autres propriétés flex, les trois balises (flex-items) se placent les unes à côté des autres.
Prenons un peu de hauteur
Par défaut la balise <body> n'a pas de hauteur propre. Cette dernière dépend de la quantité de contenu que l'on y place. Par conséquent, nous devons forcer la hauteur de cette balise et nous assurer que celle-ci sera toujours égale à la hauteur d'affichage du navigateur utilisé, sauf bien sûr si le contenu du <main> venait à dépasser ladite hauteur.
Nous pourrions penser qu'il suffit d'appliquer une valeur de 100% sur le body. Hélas le pourcentage ne fonctionne pas sur la propriété height. Fort heureusement, il existe une unité de dimensionnement, le viewport, qui règle ce problème. Appliquons ainsi la valeur 100vh (pour viewport height) à la propriété height. Pour que cela soit parfait et évité d'avoir la présence de la barre de scroll si le contenu est inférieur à la hauteur d'affichage du navigateur, nous devons annuler le margin qui est intrinsèquement appliqué sur la balise <body> par tous les navigateurs. D'où la présence de la propriété margin:0; dans notre code CSS.
Fixer le footer en bas de page
Enfin, il nous reste à forcer la balise <main> à occuper tout l'espace situé entre le <header> et le <footer>. C'est le rôle de la propriété flex-grow associée à la valeur 1 et placée non pas sur le <body>, mais sur le <main>. C'est cette propriété qui maintient le <footer> à se positionner tout en bas.
Et voilà, le tour est joué. Quelle que soit la hauteur de votre écran le <footer> reste en bas de page. Le reste du code CSS n'est là que pour faire de l'habillage esthétique.
Fixer un footer en bas de page grâce au grid CSS
Voyons maintenant comment réaliser la même chose, mais cette fois-ci en utilisant une méthode encore plus récente. Cette technique est donc plus optimum côté CSS. Là encore, si vous souhaitez en savoir plus sur le module grid CSS je vous renvoie vers le site Lacascade.io et l'excellent article CSS Grid Layout, guide complet.
Tout comme précédemment, c'est la balise <body> qui tient le rôle principal. Afin d'appliquer une grille virtuelle, le module grid CSS a besoin d'un conteneur grid (le <body>), et de grid-items (les <header>, <main> et <footer>). Ces éléments joueront le rôle des 3 lignes de notre grille et occuperont toute la largeur. Voilà pour le principe.
Ces techniques sont régulièrement abordées dans nos formations WordPress lorsque nous travaillons la personnalisation de thèmes avec DIVI.
<body> <!--CONTENEUR GRID-->
<header> <!--ITEM GRID-->
HEADER
</header>
<main> <!--ITEM GRID-->
MAIN
</main>
<footer> <!--ITEM GRID-->
FOOTER
</footer>
</body>Construction de la grille
Côté CSS nous devons, comme pour la méthode flexbox, appliquer une hauteur de 100vh sur la balise <body>. Prenez soin également d'annuler le margin en le mettant à zéro. Puis, nous allons utiliser deux propriétés spécifiques au grid CSS. Commençons par transformer notre <body> en conteneur grid grâce à display associée cette fois-ci à la valeur grid. Dès lors, le navigateur applique une grille virtuelle dont nous devons définir les hauteurs des lignes et la largeur des colonnes.
body{
/**** CEST ICI QUE CA SE PASSE ****/
display: grid; /*Transforme la balise body en contenur grid*/
grid-template-rows: auto 1fr auto; /*défini la hauteur que les lignes de la grille doivent occuper. Auto correspond à la hauteur par défaut de la ligne (en fonction de ce qu'il y a dedans donc). Fr (fraction) permet d'occuper l'espace restant*/
height: 100vh; /*vh (pour viewport height) permet de s'assurer que le body fera bien toute la hauteur de la surface d'affichage du navigateur*/
/**********************************/
font-family: Arial, Helvetica, sans-serif;
margin: 0; /*à mettre si pas de normalize.css*/
}Les grid-items que sont le <header>, le <main> et le <footer> constituent le nombre de lignes de la grille. Reste à définir leur hauteur respective. C'est là qu'intervient la propriété grid-template-rows. Elle est l'équivalent grid CSS de la propriété flex-grow pour le flexbox, avec toutefois une différence notable, grid-template-row ne s'applique pas sur l'item <main>, mais sur le conteneur <body>
Cette propriété a autant de valeurs que de lignes. Donc trois dans notre cas. La valeur auto signifie que la hauteur des lignes dépendra de la quantité du contenu déposé à l'intérieur. La valeur 1fr (fr pour fraction) permet d'automatiser le calcul de la hauteur sur la fraction d'espace qui reste. C'est cette valeur qui garantit que le <footer> sera toujours en bas.
Comme nous souhaitons que notre grille n'ait qu'une colonne, nous n'avons pas besoin de spécifier de largeur à nos trois grid-items. En effet, les balises qui constituent nos lignes sont de type block et occupent naturellement toute la largeur disponible.
Vous trouverez ici un exemple avec code HTML et CSS pour la version avec grid CSS (Cf. l'image d'ouverture).
Et voilà, c'est fini ! Vous avez maintenant deux options pour créer des pages HTML avec l'assurance d'avoir fixé un footer en bas de page même si vous avez peu de contenu.
Si cet article vous a aidé, ou appris quelque chose, n'hésitez pas à laisser un commentaire, cela fait toujours plaisir.
Vous souhaitez allez plus loin ?
Découvrez nos formations WordPress dédiées la création de site vitrine ou e-commerce encadré par un professionnel qui vous guide tout au long du processus de conception.
Merci pour l’astuce. Cela me sera très utile.
merci beaucoup. Je vais m’y mettre bientot
Première page qui répond clairement à ma recherche, bravo !
Merci Bruno Greco.
Heureux que cet article vous a été bénéfique.