Comment puis-je créer un pied de page collant qui reste en bas de la page quelle que soit la hauteur du contenu ?

Positionnement du pied de page : bas de page ou contenu, adaptatif à la hauteur

Contenu dynamique, placement fluide du pied de page

Dans la conception Web, il est souvent souhaitable de assurez-vous que le pied de page reste au bas de la page ou de la fenêtre du navigateur, quelle que soit la longueur du contenu. Ceci peut être réalisé avec les éléments suivants :

Solution Flexbox

Avec Flexbox, créer des pieds de page collants est simple :

1. Définir un conteneur flexible (par exemple, #main- wrapper) avec flex-direction défini sur column.
2. Définissez la hauteur minimale du conteneur flexible sur 100 % pour garantir qu'il couvre toute la hauteur de la page.
3. Ajoutez un élément enfant au conteneur flex avec une valeur flex supérieure à 0 (par exemple, article { flex: 1; }). Cela permet d'étendre l'élément verticalement et de pousser le pied de page vers le bas.

Code CSS :

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

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!