Comment créer un pied de page collant en HTML ?

Comment s'assurer que les pieds de page sont fixés au bas de page

Dans les pages HTML, il est souvent souhaitable d'avoir un pied de page fixe qui reste en bas de page. en bas de la page, quelle que soit la longueur du contenu. Cependant, parfois, des problèmes de style peuvent empêcher les éléments de pied de page d'occuper toute la largeur de la page ou de laisser un espace blanc en dessous d'eux.

Pour résoudre ce problème, une solution populaire est la technique du « pied de page collant ». Cette méthode consiste à créer un élément wrapper qui contient le contenu du corps et un élément push de la même hauteur que le pied de page.

En définissant la marge inférieure du wrapper sur une valeur négative équivalente à la hauteur du pied de page, l'élément push est poussé vers le bas de la page. Cela force le pied de page à coller au bord inférieur, quelle que soit la longueur de la page.

Pour illustrer, considérons le code CSS suivant :

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

Structure HTML :

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

En mettant en œuvre cette approche de pied de page collant, vous pouvez vous assurer que vos éléments de pied de page restent fixes en bas de la page, remplissant toute la largeur de la page et éliminant les espaces blancs indésirables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!