Pourquoi le pourcentage de hauteur de mon élément de grille ne fonctionne-t-il pas correctement ?

Pourquoi la hauteur de mon élément de grille n'est-elle pas calculée correctement ?

Le calcul incorrect de la hauteur peut provenir de la façon dont les pourcentages de hauteur sont interprétés dans la grille CSS mises en page.

Dans votre code, le conteneur de grille a une hauteur fixe de 100 px, tandis que l'élément de grille a une hauteur de 200%. Normalement, vous vous attendez à ce que l'élément de grille occupe deux fois la hauteur du conteneur (200 px). Cependant, cela ne se produit pas dans votre cas.

La raison en est que dans une disposition de grille CSS, les éléments de grille existent à l'intérieur des pistes, qui à leur tour existent dans le conteneur. Les éléments de grille occupent des lignes ou des colonnes dans les pistes, pas directement dans le conteneur.

Par conséquent, le pourcentage de hauteur d'un élément de grille est relatif à la hauteur de la piste qu'il occupe, et non à la hauteur du conteneur. Dans votre code, la ligne a une hauteur automatique par défaut, ce qui permet à l'élément de grille de s'étirer selon les besoins.

Pour résoudre ce problème, vous devez définir une hauteur spécifique pour la ligne occupée par l'élément de grille. Cela garantira que le pourcentage de hauteur de l'élément de grille est calculé correctement par rapport à cette hauteur. Dans votre code modifié, la hauteur de la ligne a été définie sur 100 px pour correspondre à la hauteur du conteneur, ce qui entraîne le comportement souhaité :

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

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!