Comment puis-je créer un pied de page collant qui reste au bas du contenu d'une page dynamique ?

Pied de page en bas de page ou contenu, selon celui qui est le plus bas

Introduction

Maintenir le pied de page en bas absolu de la page peut être un défi lorsque le contenu de la page est dynamique et varie en hauteur. Cet article examine une technique permettant de positionner automatiquement le pied de page en bas du contenu de la page ou en bas de la fenêtre du navigateur, selon ce qui est le plus bas.

Chargement dynamique du contenu

Dans votre scénario , le contenu est chargé dynamiquement dans le fichier

élément en utilisant JavaScript. À mesure que le contenu change, la hauteur de l'

change également. Vous souhaitez conserver le pied de page en bas du contenu de la page même avec ce chargement de contenu dynamique.

Pieds de page collants avec Flexbox

Flexbox offre une solution simple pour les pieds de page collants. En créant un conteneur flexible (#main-wrapper) avec la direction flex définie sur colonne, vous pouvez disposer plusieurs éléments verticalement dans le conteneur.

La clé pour obtenir un pied de page collant avec flexbox est d'attribuer un flex valeur supérieure à 0 sur tous les éléments sauf le pied de page. Cela garantit que ces éléments se développeront pour remplir l'espace disponible verticalement dans le conteneur.

Dans ce cas, l'

L'élément reçoit flex : 1, qui indique au navigateur de le développer pour remplir l'espace restant après l'en-tête à hauteur fixe et les éléments de navigation.

Extrait de code

Le code suivant montre comment implémenter un pied de page collant utilisant flexbox :

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

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

article {
  flex: 1;
}

Conclusion

En tirant parti de la puissance de flexbox et en utilisant la propriété min-height sur le conteneur (#main-wrapper), vous pouvez créer un pied de page collant qui ajuste automatiquement sa position en fonction de la hauteur du contenu. Cette approche offre une solution flexible pour le chargement dynamique du contenu tout en garantissant que le pied de page reste en bas de la page ou de la fenêtre du navigateur.

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!