Conserver le pied de page en bas avec Grid layout en CSS

Cette méthode fonctionne très bien. Avec une disposition Grid Layout sur l'élément body, nous allons déterminer le nombre de colonnes qui composent la page. Ici, il y a l'entête, le contenu et le pied de page. En indiquant trois colonnes, nous allons permettre au pied de rester en bas de page peu importe la quantité de contenu dans le document.

Partager la démonstration :

Partager sur Facebook
Partager sur Twitter-X
Partager sur Linkedin

Voir d'autres manières de conserver le pied de page en bas avec CSS




<body>

<header>

</header>

<main>

...
</main>


<footer>

</footer>

</body>








body {

min-height:100vh;
display: grid;
grid-template-rows: auto 1fr auto;
/*grid-template-rows: min-content 1fr min-content;*/

}