Pourquoi mon pied de page « position : collant » ne fonctionne-t-il pas lorsque je définis une propriété « hauteur » ?

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

Lors de l'utilisation de CSS pour créer un en-tête collant, il est courant de définir la propriété height du pied de page div. Cependant, cela peut parfois entraîner l'échec du comportement collant.

La raison en est que le positionnement collant repose sur le bloc contenant pour déterminer le point de blocage. Lorsque la propriété height est définie sur le pied de page div, elle devient le bloc conteneur. Par conséquent, le div de pied de page est déjà au bord de son bloc conteneur et il n'y a plus de seuil à franchir pour déclencher le comportement collant.

Pour résoudre ce problème, supprimez la propriété height de la division de pied de page. Cela permettra au corps de devenir le bloc conteneur, et le div du pied de page pourra coller au bas de la page comme prévu.

Voici un exemple de la façon dont le CSS pourrait être modifié pour corriger le sticky comportement :

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

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

Avec ce changement, le pied de page div restera désormais collé au bas de la page comme prévu.

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!