Heim > Web-Frontend > CSS-Tutorial > Warum funktioniert die prozentuale Höhe meines Rasterelements nicht richtig?

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

Patricia Arquette
Freigeben: 2024-12-03 07:08:09
Original
209 Leute haben es durchsucht

Why Isn't My Grid Item's Percentage Height Working Correctly?

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 */
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage