Comment puis-je conserver un pied de page en bas de page, quelle que soit la hauteur du contenu ?

Pied de page en bas de page ou contenu

Problème :

Contenu chargé dynamiquement dans un

peut varier en hauteur. Le but est de positionner le en bas de la page lorsque le contenu est étendu, ou en bas de la fenêtre du navigateur lorsqu'il est limité.

Réponse :

Version Flexbox :

Pour les navigateurs prenant en charge Flexbox, une solution simple consiste à utiliser la propriété display: flex avec une hauteur de 100 % pour l'élément wrapper (#main-wrapper). Cela garantit que l'emballage s'étire pour remplir toute la fenêtre d'affichage.

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

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

Dans l'emballage, l'objet

doit avoir une valeur de flexion de 1, ce qui lui permet de s'étendre verticalement. Cela garantit que le sera toujours poussé vers le bas de la page ou vers le bas du contenu, selon ce qui est le plus grand.

article {
  flex: 1;
}

HTML révisé :

<div>

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!