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

Cette méthode ancienne fonctionne très bien. L'inconvénient est que le footer passe par dessus les autres élements de la page (positionnement absolue). Il faut également prévoir un rembourrage (padding) sur le contenu égal à la hauteur du pied de 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 {

position: relative;
min-height: 100vh;

}

main {

margin:0 auto;
padding: 2.5rem 1rem;
max-width: 80ch;

}

footer {

position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; 

}