Comment puis-je 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 en bas de page ou contenu, selon le chiffre le plus bas

Introduction

Dans le développement Web, il est essentiel de assurer le bon positionnement des éléments sur une page Web, notamment lorsqu’il s’agit de contenu dynamique. Un défi courant consiste à obtenir un pied de page qui reste au bas de la page ou du contenu, selon ce qui est le plus bas.

Énoncé du problème

La structure HTML fournie comprend un Élément wrapper parent (#main-wrapper) contenant un en-tête, une navigation, un article et un pied de page. Le défi consiste à ajuster dynamiquement la position du pied de page en fonction de la hauteur du contenu dans l'élément article. Le pied de page doit rester en bas de la page lorsque le contenu est suffisant, mais se déplacer vers le bas de la fenêtre du navigateur lorsque le contenu est limité.

Solution Flexbox

Une solution robuste et une approche moderne pour résoudre ce problème consiste à tirer parti de flexbox. Flexbox offre un système de disposition polyvalent qui simplifie le positionnement et l'alignement des éléments dans un conteneur. En utilisant la capacité de flexbox à aligner verticalement les éléments, nous pouvons obtenir le comportement de pied de page collant souhaité.

Code CSS

Le code CSS suivant utilise flexbox pour implémenter le sticky footer :

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

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

article {
  flex: 1;
}

Dans cette configuration, l'élément #main-wrapper est le conteneur flexbox, et il a flex-direction défini sur colonne, ce qui signifie que les éléments seront empilés verticalement. L'élément article a flex: 1, ce qui lui fait occuper l'espace restant non occupé par l'en-tête et la navigation.

Lorsqu'il y a suffisamment de contenu dans l'article, il s'agrandit pour pousser le pied de page vers le bas, le positionnant à le bas de la page. Cependant, lorsque le contenu est limité, l'article se rétrécit et le pied de page se déplace dynamiquement vers le bas de la fenêtre du navigateur, car la hauteur minimale de l'élément #main-wrapper garantit qu'il remplit toujours la fenêtre d'affichage.

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!