Comment fixer le footer en bas de page et sur toute la largeur en CSS

footer bas depage css

 

 

Composition de votre page

<html>

<body>

<header>
</header>

<div class="container">
---
</div>

<footer>
</footer>

</body>

</html>

Afin que le footer se fixe en base page, on va appliquer un height de 100% à html et un min-height de 100% à body avec une position:relative.

On va ensuite fixer le footer pour qu'il reste en bas de page avec une position:absolute et un bottom:0. On ajoute également un width à 100% afin qu'il prenne toute la largeur.

Ce qui nous donne en CSS

html
{
height:100%
}

body
{
min-height:100%;
position:relative
}

footer
{
position:absolute;
width:100%;
bottom: 0px;
}