Warum funktioniert die prozentuale Höhe meines Rasterelements nicht wie erwartet?

Warum die Rasterelementhöhe fehlschlägt, wenn sie als Prozentsatz der übergeordneten Höhe berechnet wird

Die Höhenberechnung von CSS Grid kann verwirrend sein, insbesondere wenn Prozentsätze verwendet werden. Im bereitgestellten Beispiel ist die Höhe des Rasterelements auf 200 % eingestellt, verdoppelt jedoch nicht die Höhe des Containers.

Rasterhierarchie verstehen

Ein Raster Das Element befindet sich in einer Spur, die im Container enthalten ist. Daher ist das übergeordnete Element des Rasterelements die Spur und nicht direkt der Container.

Prozentuale Höhe und Rasterstruktur

Wenn die Höhe einer Rasterzeile nicht als definiert ist B. eine feste Längeneinheit (z. B. px) oder als Bruchteil des verfügbaren Platzes (z. B. 1 fr) berechnet wird, schlägt die prozentuale Höhe des Rasterelements fehl. In diesem Fall ist die Höhe des Rasterelements standardmäßig auf „Automatisch“ eingestellt, sodass die Zeile effektiv nach Bedarf erweitert werden kann.

Container- und Zeilenhöhe festlegen

Um die Höhe des Rasterelements sicherzustellen Die Höhe basiert auf der Höhe des Containers. Legen Sie eine feste Höhe sowohl für den Container als auch für die Zeile fest. Im bereitgestellten Code betrug die Containerhöhe 100 Pixel, die Zeilenhöhe wurde jedoch auf 1 Fr festgelegt. Durch Ändern der Zeilenhöhe auf 100 Pixel verdoppelt die 200 %-Höhe des Rasterelements korrekt die Höhe des Containers.

Aktualisiertes Beispiel:

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

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

Durch Anpassen der Wenn Sie die Zeilenhöhe an die Containerhöhe anpassen, verhält sich die Höhe des Rasterelements nun wie erwartet: Die Höhe des Containers wird verdoppelt und der Inhalt darin korrekt verpackt es.

Das obige ist der detaillierte Inhalt vonWarum funktioniert die prozentuale Höhe meines Rasterelements nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!