Comment fixer un div au bas de la page en HTML et CSS ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-07-29 16:21:59
Thèmes : webmaster - html - css
Question

Comment puis-je fixer une balise <div> au bas de la page en HTML et CSS ?

Réponse

Pour fixer un élément au bas d'une page HTML, et en faire un footer fixe, vous pouvez utiliser la propriété CSS position avec la valeur fixed.

Dans l'exemple ci-dessous, on crée une une CLASS CSS nommée bas.

  • La propriété fixed fixe l'élément de telle manière qu'il reste à sa place même lorsque l'utilisateur défile la page.
  • Les propriétés bottom et left avec la valeur 0 permettent respectivement de positionner la balise <div> en bas et à gauche de l'écran.
  • Les propriétés width et height permettent quant à elles de déterminer la taille de la balise <div> : une longueur de 100% et une hauteur de 40 pixels.
  • La propriété padding détermine à la marge interne et background la couleur de fond du footer.

Exemple pour fixer une balise <div> au bas de la page en HTML et CSS :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment fixer un div au bas de la page en HTML et CSS ?</title>
</head>
<style> 
#contenu { 
height: 10000px; 
}
#bas { 
position: fixed; 
padding: 10px 10px 10px 10px; 
bottom: 0;
left: 0;
width: 100%; 
height: 40px; 
background: lightgrey; 
} 
</style> 
<body>
<div id="contenu"></div>
<div id="bas">Bas de page qui reste fixe</div> 
</body>
</html>