Warum füllt mein Rasterelement mit 200 % Höhe nicht den übergeordneten Container?

Berechnung der Rasterelementhöhe

Frage:

In einem CSS-Rasterlayout ein Raster Die Höhe des Elements ist auf 200 % festgelegt, es wird jedoch nicht erweitert, um der Höhe des übergeordneten Containers zu entsprechen. Stattdessen behält es die Höhe seines untergeordneten Elements bei. Warum passiert das?

Antwort:

Die Höhenberechnung für Rasterelemente wird durch ihre Position innerhalb der Rasterstruktur bestimmt. Das übergeordnete Element eines Rasterelements ist nicht der Container, sondern die Spur, in der es sich befindet.

In diesem Fall ist die Containerhöhe auf 100 Pixel festgelegt, die Zeilenhöhe jedoch auf 1 Fr, was eine flexible Längeneinheit ist . Dadurch ist die prozentuale Höhe (200 %) des Rasterelements relativ zur Spurhöhe, sodass das Element die Spur vertikal erweitern kann.

Lösung:

Um sicherzustellen, dass das Rasterelement erweitert wird, um die Höhe des Containers auszufüllen, muss auch die Zeilenhöhe festgelegt werden. Indem Sie die Zeilenhöhe auf denselben Wert wie die Containerhöhe festlegen (z. B. Rastervorlagenzeilen: 100 Pixel), wird die prozentuale Höhe des Rasterelements basierend auf der Containerhöhe korrekt berechnet.

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

Mit dieser Anpassung nimmt das Rasterelement nun die gesamte Höhe des Containers ein und jeglicher überlaufender Inhalt wird durch die Bildlaufleiste ausgeblendet.

Das obige ist der detaillierte Inhalt vonWarum füllt mein Rasterelement mit 200 % Höhe nicht den übergeordneten Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!