Comment faire en sorte que le pied de page soit toujours en bas de la page ?

par

Il est important d’empêcher le pied de page de flotter vers le haut de la page lorsque l’on cherche à créer un site Web soigné. Les pages avec contenu court peuvent rencontrer ce problème, mais il est facile à résoudre avec quelques lignes de CSS. En supposant que votre code HTML ressemble à l’extrait ci-dessous, voici deux façons modernes de s’assurer que le pied de page se trouve toujours en bas de la page :

<body>
  <main></main>
  <footer></footer>
</body>

Utilisation de Flexbox

Vous pouvez utiliser la méthode Flexbox pour faire en sorte que le pied de page soit toujours en bas de la page. Pour ce faire, il suffit de définir l’attribut body élément min-height: 100vh, display: flex et flex-direction: column. Ensuite, donnez le footer élément a margin-top: auto pour que sa marge remplisse l’espace restant entre lui et son élément frère précédent. Notez que cette technique n’étire pas le frère ou la sœur précédent(e), mais plutôt pousser le pied de page en bas de la page.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

Utilisation de la grille

Vous pouvez également utiliser la grille d’une manière très similaire. Remplacez simplement display: flex pour display: grid et flex-direction: column pour grid-template-rows: 1fr auto dans le body . Aucun attribut supplémentaire n’est nécessaire pour l’élément footer n’est nécessaire. Dans ce cas, l’élément fr est utilisé pour étirer l’unité main élément pour remplir l’espace restant.

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

Notes

Comme vous pouvez le constater, les deux techniques sont simples à mettre en œuvre. Selon vos besoins, l’une peut être plus adaptée que l’autre. De manière générale, la grille est plus flexible dans la plupart des cas et peut vous aider si vous avez des mises en page plus complexes, qui peuvent inclure un en-tête ou une barre latérale.

Laisser un commentaire