Pourquoi `position: sticky` ne fonctionne-t-il pas sur mon pied de page lorsque la hauteur du corps de la page et l'élément #main sont spécifiés ?

position : le collant ne fonctionne pas lorsque la hauteur est spécifiée

Problème :

Les utilisateurs rencontrent un problème où le pied de page, désigné par #footerNav, ne parvient pas à adhérer au comportement position: sticky lorsqu'une propriété height est définie à la fois pour le corps de la page et pour l'élément #main. Le pied de page reste statique au lieu de défiler fixé vers le haut de la fenêtre.

Solution :

Le problème vient du débordement de contenu provoqué par les propriétés de hauteur. position : sticky est conçu pour devenir actif uniquement lorsque son bloc conteneur atteint un seuil spécifié. Dans ce cas, définissez body { height: 100%; } crée une situation dans laquelle le pied de page atteint immédiatement la fin de son bloc conteneur, empêchant position: sticky de jamais s'activer.

Explication :

Selon la définition de position : sticky, la position collante est appliquée lorsque l'élément franchit un seuil spécifié dans son bloc conteneur. Le bloc contenant dans ce cas est le corps, et comme body {hauteur : 100% } est défini, la hauteur du corps est contrainte à la fenêtre d'affichage.

Lorsque #main {hauteur : 92% } est spécifié , 92% de la hauteur disponible est allouée à #main, ne laissant que 8% à #footerNav. Puisque #footerNav est déjà au bas de son bloc conteneur (le corps), il ne peut pas dépasser la limite de la fenêtre d'affichage et activer la position : sticky.

Solution :

Pour résoudre le problème, assurez-vous que le contenu ne déborde pas du bloc conteneur. Cela peut être accompli en supprimant les propriétés de hauteur de body et #main, permettant au contenu de circuler naturellement dans la fenêtre d'affichage sans provoquer de débordement.

Notes supplémentaires :

• Spécifier la hauteur sous forme de pourcentage, comme vh, n'est toujours pas conseillé car cela peut conduire au même problème.
• Le problème a été rencontré dans Firefox 61 (Nightly), Safari 53 (Tech Preview) et Chrome 65.

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!