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

Pourquoi la hauteur des éléments de la grille échoue lorsqu'elle est calculée en pourcentage de la hauteur des parents

Le calcul de la hauteur de la grille CSS peut prêter à confusion, en particulier lors de l'utilisation de pourcentages. Dans l'exemple fourni, la hauteur de l'élément de grille est définie sur 200 %, mais elle ne double pas la hauteur du conteneur.

Comprendre la hiérarchie des grilles

Une grille L'élément réside dans une piste, qui est contenue dans le conteneur. Par conséquent, le parent de l'élément de grille est la piste, pas directement le conteneur.

Pourcentage de hauteur et structure de grille

Lorsque la hauteur d'une ligne de grille n'est pas définie comme un unité de longueur fixe (par exemple, px) ou calculée comme une fraction de l'espace disponible (par exemple, 1fr), le pourcentage de hauteur de l'élément de grille échoue. Dans ce cas, la hauteur de l'élément de grille est par défaut automatique, ce qui lui permet d'étendre la ligne selon les besoins.

Définition de la hauteur du conteneur et de la ligne

Pour garantir la hauteur de l'élément de grille La hauteur est basée sur la hauteur du conteneur, définissez une hauteur fixe à la fois sur le conteneur et sur la ligne. Dans le code fourni, la hauteur du conteneur était de 100px, mais la hauteur de la ligne était définie sur 1fr. En modifiant la hauteur de la ligne à 100 px, la hauteur de 200 % de l'élément de grille doublera correctement la hauteur du conteneur.

Exemple mis à jour :

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

.gridItem {
  // ...
  overflow: auto;
}

En ajustant la hauteur la hauteur de la ligne pour correspondre à la hauteur du conteneur, la hauteur de l'élément de grille se comportera désormais comme prévu, doublant la hauteur du conteneur et enveloppant correctement le contenu à l'intérieur ça.

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!