Pourquoi « position : collante » ne fonctionne-t-il pas avec une hauteur d'élément définie ?

'position : collante' ne fonctionne pas lorsque la "hauteur" est définie

Comprendre le positionnement collant

Positionnement collant, comme défini par CSS, fonctionne au sein d'une racine de flux (généralement la fenêtre d'affichage du navigateur ou un conteneur déroulant) et permet aux éléments de rester fixes par rapport à leur environnement jusqu'à ce que certaines conditions soient remplies. Lorsqu'un élément rencontre le seuil spécifié (par exemple, un décalage supérieur par rapport à la fenêtre d'affichage), il devient "bloqué" en place jusqu'à ce qu'il atteigne le bord opposé de son bloc conteneur.

Débordement affectant la fonctionnalité collante

Dans le scénario donné, où 'position: sticky' est appliqué à un élément, mais que le comportement n'est pas celui attendu, il est essentiel de considérer le bloc conteneur de l'élément et tout débordement qui peut être présent.

Relation entre élément et bloc conteneur

Dans le code fourni, l'élément avec 'position: sticky' (#footerNav) a son bloc conteneur défini comme 'html, body' . Comme le CSS définit « html, body {hauteur : 100 % } », la fenêtre entière devient le bloc conteneur.

Problème de débordement

Cependant, depuis le #main div a une propriété « hauteur : 92 % », tandis que #footerNav a une « hauteur : 8 % », le contenu déborde au-delà des valeurs de « hauteur » combinées. Ce débordement crée un bloc conteneur étendu, permettant à l'élément collant d'atteindre prématurément le bord opposé (c'est-à-dire au bas de #main). En conséquence, l'élément collant apparaît fixe à la fin de #main au lieu de rester bloqué jusqu'à ce qu'il atteigne le bas de la fenêtre du navigateur.

Solution

Pour résoudre le problème, on peut supprimer les restrictions de hauteur sur l'élément #main, permettant au contenu de déborder naturellement. Cela garantit que le conteneur de défilement reste la totalité de la fenêtre d'affichage et que l'élément collant fonctionne comme prévu, restant bloqué jusqu'à ce qu'il atteigne le bas de la page.

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!