Comment mettre 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.
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 naviguer 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 en bas de page et 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.
Un footer en bas de page grâce au flexbox CSS
La première méthode que nous allons utiliser pour placer 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 votre 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 3 zones définies plus haut : le ‹header›, le ‹main› et le ‹footer›. La technique du flexbox nous demande une petite modification de structure pour que cela fonctionne correctement. Nous devons juste ajouter une balise ‹div› autour du header et du main. Pourquoi une div et pourquoi pas une section ? Simplement parce que la div est une balise sémantiquement neutre et qu’elle est faite pour réaliser des structures intermédiaires dans le code HTML, sans apporter de sens pour les moteurs de recherche. Au final votre code ressemble à cela :
<body> <!--CONTENEUR FLEX-->
<div> <!--FLEX ITEM-->
<header>
HEADER
</header>
<main>
MAIN
</main>
</div>
<footer> <!--FLEX ITEM-->
FOOTER
</footer>
</body>
</html>
Quelques explications s’imposent. Pour disposer des éléments en ligne ou en colonne le module flexbox à besoin de la structure suivant : Un conteneur flex et des items à l’intérieur. Tout se passe ici au niveau de la balise body. Cette dernière va jouer le rôle de conteneur flex. La div (qui contient le header et le main) et la balise footer vont jouer le rôle des flexitems.
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*/
justify-content: space-between; /*Comme cette propriété est liée à l'axe principal elle agit maintenant de haut en bas*/
height: 100vh; /*Pour voir agir justify-content sur la verticale, il faut donner une hauteur au body. 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*/
}Là encore 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 deux items se placent par défaut 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 le footer reste en dessous de la div. 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 deux items se replacent l’un en dessous de l’autre. Toutefois notre balise footer n’est toujours pas en bas de page.
la div et le footer se placent l’un à côté de l’autre
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. Du coup 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 sur si le contenu du main dépasse la hauteur d’affichage.
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 éviter 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 appliqué par défaut sur la balise body par tous les navigateurs. D’où la présence de la propriété margin:0; dans notre code CSS.
Placer le footer en bas de page
Enfin il nous reste à forcer la balise div à rester en haut et à placer le footer en bas de page. C’est le rôle de la propriété justify-content associée à la valeur space-between. Cette dernière force le premier item à se positionner tout en haut (parce que nous avons changé la direction de l’axe principal) et le dernier item tout en bas, puis elle calcule en automatique l’espace entre chaque item. 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.
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 et qui a l’avantage de ne pas modifier la structure HTML classique. Cette technique est donc plus optimum, aussi bien côté HTML que 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 d’items grid (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.
<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 items grid 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. Cette propriété a autant de valeurs que de lignes. Donc, dans notre cas, trois. 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 faction 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 items grid. 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.
Et voilà, c’est fini ! Vous avez maintenant deux options pour créer des pages HTML avec l’assurance d’avoir toujours un footer en bas de page même si vous avez peu de contenu.
Retour vers la page d’accueil du blog.
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.