Pourquoi le pourcentage de hauteur de mon élément de grille CSS ne fonctionne-t-il pas comme prévu ?

Problème de calcul de la hauteur dans un élément de grille CSS

En CSS, la propriété height d'un élément de grille peut parfois se comporter de manière inattendue. Cela peut être dû au fait que la hauteur basée sur un pourcentage est calculée par rapport à un élément parent inattendu.

Étude de cas

Considérez un élément de grille CSS avec les dimensions suivantes :

• Conteneur de grille : hauteur : 100 px ;
• Élément de grille : hauteur : 200 %;

Il est prévu que l'élément de la grille soit deux fois plus haut que le conteneur, tout excédent étant masqué par une barre de défilement. Cependant, le résultat réel montre que l'élément de grille déborde sans barre de défilement.

Comprendre la cause

En y regardant de plus près, il devient clair que le pourcentage de hauteur est calculé en fonction sur l'élément enfant de l'élément de grille, et non sur le conteneur parent de l'élément de grille. En effet, les éléments de grille existent deux niveaux plus bas que le conteneur, le niveau intermédiaire étant les pistes.

Résolution

Pour résoudre ce problème, la hauteur des deux conteneur et la ligne à l’intérieur du conteneur doivent être définies sur une valeur fixe. Dans ce cas, le conteneur et la ligne sont définis sur 100 px :

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

En définissant la hauteur du conteneur et de la ligne, le pourcentage de hauteur de l'élément de grille peut être calculé correctement par rapport au parent prévu. . Cela permet à l'élément de grille d'avoir une hauteur de 200 % de la hauteur de la ligne, garantissant ainsi qu'il rentre dans le conteneur avec tout débordement masqué par la barre de défilement.

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!