La technique pour positionner un footer en bas de page

Vous est-il déjà arrivé de visiter un site dont le pied de page traînait en plein milieu de l’écran ? Ca a l’air simple comme ça mais positionner un élément exactement en bas de la page a été un vrai casse-tête pour les intégrateurs pendant des années. Voici une technique « moderne » qui résout le problème.

Cette technique utilise flexbox. Elle est supportée par tous les navigateurs depuis plusieurs années.

Commencez par définir une hauteur de 100% pour la balise html (qui contient tout le reste du site).

html{
    height:100%
}

Puis attaquez-vous à la balise body.

body{
    display:flex;
    flex-direction:column;
    min-height:100%;
}

C’est là que la magie opère. Grâce au modèle de boite flexbox, vous pouvez assigner la valeur auto à la propriété margin-top du footer.

footer{
    margin-top:auto;
}

Le footer restera ainsi positionné en bas de page quelque soit la taille du contenu. Il n’y aura pas non plus de superposition et ça fonctionne aussi sur mobile.

Très bonne journée à vous.