Warum funktioniert die prozentuale Höhe meines Rasterelements nicht richtig?

Warum wird die Höhe meines Rasterelements nicht korrekt berechnet?

Die falsche Höhenberechnung kann auf die Art und Weise zurückzuführen sein, wie Höhenprozentsätze im CSS-Raster interpretiert werden Layouts.

In Ihrem Code hat der Rastercontainer eine feste Höhe von 100 Pixel, während das Rasterelement eine Höhe von hat 200 %. Normalerweise würden Sie erwarten, dass das Rasterelement die doppelte Höhe des Containers (200 Pixel) einnimmt. Dies ist in Ihrem Fall jedoch nicht der Fall.

Der Grund dafür ist, dass in einem CSS-Rasterlayout Rasterelemente innerhalb von Spuren vorhanden sind, die wiederum innerhalb des Containers vorhanden sind. Rasterelemente belegen Zeilen oder Spalten innerhalb von Spuren, nicht direkt im Container.

Daher ist der Höhenprozentsatz eines Rasterelements relativ zur Höhe der Spur, die es einnimmt, nicht zur Höhe des Containers. In Ihrem Code verfügt die Zeile über eine standardmäßige automatische Höhe, die es dem Rasterelement ermöglicht, sich nach Bedarf zu dehnen.

Um dieses Problem zu beheben, müssen Sie eine bestimmte Höhe für die Zeile festlegen, die das Rasterelement einnimmt. Dadurch wird sichergestellt, dass die prozentuale Höhe des Rasterelements im Verhältnis zu dieser Höhe korrekt berechnet wird. In Ihrem geänderten Code wurde die Zeilenhöhe auf 100 Pixel festgelegt, um der Höhe des Containers zu entsprechen, was zu dem gewünschten Verhalten führte:

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

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