Warum verdoppelt die Höhe meines CSS-Rasterelements nicht die Höhe des übergeordneten Containers?

CSS-Raster: Verwirrung bei der Berechnung der Elementhöhe

Sie stoßen auf ein Problem mit der Höhe eines CSS-Rasterelements, insbesondere des .gridItem , wird nicht wie erwartet berechnet. In diesem Raster-Setup:

.gridContainer {
  height: 100px;
  grid-template-rows: 1fr;
}

.gridItem {
  height: 200%;
}

Die Absicht ist, dass .gridItem doppelt so hoch ist wie sein übergeordnetes Element, .gridContainer. Das Ergebnis scheint jedoch stattdessen die Höhe des untergeordneten Elements zu berücksichtigen.

Eltern-Kind-Beziehung im CSS-Raster verstehen

Bei der Arbeit mit CSS-Rastern ist es wichtig, die zu verstehen Eltern-Kind-Beziehung. In diesem Fall ist das übergeordnete Element für das .gridItem nicht direkt der .gridContainer, sondern die Rasterspur, die es enthält.

Wenn Sie „grid-template-rows: 1fr;“ angeben, erstellen Sie eine Spur mit einem flexiblen Höhe, die 1 Bruchteil des verfügbaren Platzes des übergeordneten Elements einnimmt. Da die übergeordnete Spur eine feste Höhe von 100 Pixel hat, beträgt die Höhe der Spur 100 Pixel.

Obwohl .gridItem eine Höhe von 200 % hat, bezieht es sich daher auf die Höhe der übergeordneten Spur, die 100 Pixel beträgt. Dies erklärt, warum die Höhe von .gridItem effektiv doppelt so hoch ist wie die Höhe des Tracks und nicht des übergeordneten Containers.

Fix: Festlegen expliziter Höhen sowohl für Container als auch für Track

Um dieses Problem zu beheben, müssen Sie sowohl für den .gridContainer als auch für die Rasterschiene eine feste Höhe angeben. Dadurch wird eine klare Eltern-Kind-Beziehung hergestellt und ermöglicht, dass die prozentuale Höhe von .gridItem korrekt funktioniert.

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

.gridItem {
  height: 200%;
}

Mit dieser Anpassung sollte die Höhe von .gridItem nun erwartungsgemäß doppelt so hoch sein wie die Höhe von .gridContainer .

Das obige ist der detaillierte Inhalt vonWarum verdoppelt die Höhe meines CSS-Rasterelements nicht die Höhe des übergeordneten Containers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!