Conserver le pied de page en bas avec le positionnement sticky en CSS

Cette méthode fonctionne très bien. En positionnant le pied de page avec la propriété sticky, nous pouvons garder le pied de page en bas peu importe la quantité de contenu dans la page.

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;

}

main {

margin:0 auto;
max-width: 80ch;

}

footer {

position:sticky;
top:100%;

}