pied de page en bas de la page ou du contenu, selon le cas éventuellement

introduction

dans le développement Web, il est essentiel de garantir le positionnement approprié des éléments sur une page Web, en particulier lors du traitement dynamique. Un défi commun consiste à réaliser un pied de page qui reste en bas de la page ou du contenu, selon lequel est inférieur.

Instruction Problème

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

Solution flexible

Une approche robuste et moderne pour résoudre ce problème est en levant Flexbox. Flexbox propose 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 réaliser le comportement de pied de page collant souhaité. corps { hauteur: 100%; marge: 0; rembourrage: 0; } # principal-porte-parole { Affichage: flex; Flex-Direction: colonne; Min-Height: 100%; } article { Flex: 1; }

Dans cette configuration, l'élément # main-wrapper est le conteneur Flexbox, et il a une direction flexible sur colonne, ce qui signifie que les éléments seront empilés verticalement. L'élément de l'article a Flex: 1, ce qui le fait occuper l'espace restant non absorbé par l'en-tête et la navigation. Lorsqu'il y a suffisamment de contenu dans l'article, il grandit pour pousser le pied de page vers le bas, le positionnant en 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 au bas de la fenêtre du navigateur, car le # Min-Sapper de l'élément Min-Height garantit qu'il remplit toujours la fenêtre.