Conserver le pied de page en bas avec Flexbox et flex-grow en CSS

Cette méthode fonctionne très bien. La propriété flex-grow va permettre de pousser le pied de page en bas de page peu importe la quantité de contenu de la page. Il faut bien entendu au préalable déclarer une disposition flexbox 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: flex;
flex-direction: column;

}

main {

margin:0 auto;
flex-grow: 1;
max-width: 80ch;
}