Pourquoi mon élément de grille de 200 % de hauteur ne remplit-il pas le conteneur parent ?

Calcul de la hauteur des éléments de grille

Question :

Dans une disposition de grille CSS, une grille la hauteur de l'élément est définie sur 200 %, mais elle ne s'étend pas pour s'adapter à la hauteur du conteneur parent. Au lieu de cela, elle reste la hauteur de son élément enfant. Pourquoi cela se produit-il ?

Réponse :

Le calcul de la hauteur des éléments de grille est déterminé par leur position dans la structure de grille. Le parent d'un élément de grille n'est pas le conteneur, mais plutôt la piste dans laquelle il réside.

Dans ce cas, la hauteur du conteneur est fixée à 100px, mais la hauteur de la ligne est définie sur 1fr, qui est une unité de longueur flexible. . Par conséquent, le pourcentage de hauteur (200 %) de l'élément de grille est relatif à la hauteur de la piste, ce qui permet à l'élément d'étendre la piste verticalement.

Solution :

Pour garantir que l'élément de grille s'étend pour remplir la hauteur du conteneur, la hauteur de la ligne doit également être fixe. En définissant la hauteur de la ligne sur la même valeur que la hauteur du conteneur (par exemple, grid-template-rows : 100px), le pourcentage de hauteur de l'élément de grille sera correctement calculé en fonction de la hauteur du conteneur.

.gridContainer {
  grid-template-rows: 100px; /* Adjustment; previously set to 1fr */
}

Avec cet ajustement, l'élément de grille occupera désormais toute la hauteur du conteneur, et tout contenu débordant sera 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!