Comment créer un pied de page collant qui reste en bas de la page ou du contenu, selon celui qui est le plus bas ?

Pied de page positionné en bas de la page ou du contenu, selon celui qui est le plus bas

Lorsque la hauteur du contenu chargé dynamiquement dans l'

section varie, cela peut créer un problème déroutant : comment le

section reste au bas du contenu visible tout en se conformant également à la limite inférieure de la fenêtre du navigateur ?

Version Flexbox

Pour ceux qui ont l'avantage d'utiliser flexbox, réaliser ce pied de page collant est un morceau de gâteau. En enfermant tous les éléments dans un conteneur flexible avec un wrapper qui s'étire en hauteur, le pied de page peut s'adapter sans effort au contenu dynamique.

Configurez simplement l'élément wrapper avec display: flex et flex-direction: column. Ensuite, attribuez au moins un élément frère avec une valeur flex supérieure à 0, tel que :

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

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

article {
  flex: 1;
}

Marquage HTML :

<div>

Cette approche colle efficacement le pied de page au bas du fenêtre du navigateur lorsque le contenu est court et ajuste dynamiquement sa position pour correspondre à la hauteur du contenu plus long.

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!