Conserver le footer en pied de page web avec Flexbox ou Grid

Conserver le footer fixe au pied de page

Certaines pages d'u site web peuvent être très courte, avec peu de contenus. Du coup votre pied de page (footer) n'est pas forcément "collé" au pied de votre navigateur comme pour les pages :

• la page 404
• la page de connexion (login)

Pour cela, il vous faudra définir une hauteur explicite à votre footer.
Il faudra donc l'adapter avec les media query aux différents outils d'affichage (pc, smartphone, tablettes...).
Vous pouvez également utiliser les unités de longueurs vh (viewport height), comme nous allons le faire ici.

Le code html de notre page :

<main>
<p>
Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc 
accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, 
si iussus est, necessitati, si speravit aliquid, pueritiae.
Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.
</p>
</main>
<footer>
  <p>© Yoma-Web</p>
</footer>

Astuce : garder le footer en pied de page avec flexbox

La méthode flexbox :

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
footer {
  margin-top: auto;
}
/* Optional */
main {
  margin: 0 auto;
  /* or: align-self: center */
  max-width: 80ch;
}

Fonctionnement de la méthode flexbox :

Dans le body, nous nous assurons que le contenu s'étendra (au minimum) sur toute la hauteur de l’écran avec : min-height: 100vh.
Cela ne déclenchera pas de débordement si le contenu est court (sauf pour certains navigateurs mobiles) et cela permettra au contenu de continuer à étirer la hauteur selon les besoins.
Avec la propriété flex-direction: column, nous définissons comment les éléments seront placés dans tout le body.
Elle nous permet de conserver les éléménents en bloc empilés (colonnes empilées)
L'avantage de flexbox est de tirer parti de la marge : comportement automatique.
La propriété margin-top : auto, pousse efficacement le pied de page vers le bas de l'écran.

Astuce : garder le footer en pied de page avec grid css

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* Optional */
main {
  margin: 0 auto;
  max-width: 80ch;
}

Fonctionnement de la méthode grid :

Nous conservons la propriété min-height: 100vh pour cette méthode pour étendre le contenu sur toute la hauteur.
Ensuite, nous utilisons grid-template-rows pour espacer correctement les éléments.
L'astuce étrange de cette méthode consiste à utiliser l'unité de grille spéciale fr.
L'unité fr représente une fraction de l'espace disponible dans le conteneur de la grille.
En l'utilisant, nous convions le navigateur à calculer la "fraction" d'espace disponible qui reste à distribuer à cette colonne ou ligne.

Quelle solution est la meilleure : Grid css ou flexbox ?

A première vue, je dirai que la méthode grid css est la plus simple à mettre en place et sera certainement la méthode à privilégier.
Cependant, chaque projet est différent, et la méthode à utiliser dépendra toujours de votre projet.