Pourquoi la « position : collante » ne fonctionne-t-elle pas lors du réglage de la « hauteur » ?

'position:sticky' ne fonctionne pas lors de la définition de 'height'

Comme vous l'avez remarqué, définir la propriété height sur votre élément de pied de page l'empêche de coller en haut de la page lorsque vous faites défiler vers le bas. Ce comportement se produit en raison du fonctionnement de l'algorithme de positionnement collant.

Selon la spécification CSS, un élément collant est traité comme positionné de manière relative jusqu'à ce que son bloc contenant franchisse un seuil spécifié. Dans votre cas, le bloc contenant est l'élément body, qui a une hauteur de 100 %. Lorsque l'élément principal, qui a une hauteur de 92 %, défile vers le bas, l'élément de pied de page atteint le bas de l'élément de corps et est considéré comme se trouvant au bord opposé de son bloc conteneur. Par conséquent, il n'est plus traité comme collant et reste en bas de page.

Pour résoudre ce problème, vous pouvez supprimer la propriété height de l'élément principal. Cela permettra à l'élément de pied de page de coller en haut de la page comme prévu. Vous pouvez également définir la propriété height de l'élément body sur 100vh au lieu de 100 %. Cela garantira que l'élément de corps a toujours la même hauteur que la fenêtre d'affichage et que l'élément de pied de page collera au haut de la page quelle que soit la hauteur de l'élément principal.

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!