Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum überschreitet mein fest positioniertes Rasterlayout die Körperbreite?

Susan Sarandon
Freigeben: 2024-10-30 19:02:30
Original
550 Leute haben es durchsucht

Why Does My Fixed Positioned Grid Layout Exceed The Body Width?

Fest positioniertes Rasterlayout überschreitet die Körperbreite

Bei Verwendung von CSS Grid mit einer festen Position kann es zu einem Problem kommen, bei dem sich die Rasterelemente erstrecken über den Hauptteil der Seite hinausgehen, insbesondere wenn die Eigenschaft „grid-template-columns“ auf 100 % gesetzt ist. Um zu verstehen, warum dies auftritt, analysieren wir das Problem und bieten eine Lösung an.

In Ihrem bereitgestellten CSS-Code:

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}
Nach dem Login kopieren

Sie haben eine feste Breite von 100 % für den übergeordneten Container angegeben , was bedeutet, dass es die gesamte Breite des sichtbaren Bereichs einnimmt. Die Eigenschaft „grid-template-columns“ legt die Breite der Rasterspalten auf 40 % bzw. 60 % fest.

Das entscheidende Problem liegt jedoch in der Positionierung. Wenn Sie position: fest auf den übergeordneten Container festlegen, wird es vom normalen Dokumentfluss getrennt und an den angegebenen Koordinaten platziert (in diesem Fall in der oberen linken Ecke der Seite). Der Browser reserviert Platz für das feste Element, auch wenn sein Inhalt den sichtbaren Bereich überschreitet.

Dieses Verhalten hängt nicht mit der Eigenschaft width: 100% zusammen. Selbst wenn Sie diese Zeile entfernen würden, würde das Problem weiterhin bestehen. Der Übeltäter ist die Eigenschaft „grid-template-columns“.

Die Eigenschaft „grid-template-columns“ teilt den verfügbaren Platz in zwei Spalten auf, aber Sie haben auch einen Rasterabstand von 5 Pixeln zwischen den Spalten angegeben, was zu mehr Platz führt die Gesamtbreite des Gitters. In Ihrem Fall 40 % 60 % 5px = 105px. Durch diese zusätzlichen 5 Pixel wird der Rand der rechten Spalte aus dem sichtbaren Bereich verschoben, sodass er außerhalb des Textkörpers erscheint.

Lösung:

Um dieses Problem zu beheben, müssen Sie rechnen die korrekten Prozentsätze für die Rasterspalten unter Berücksichtigung der Rasterlücke. Anstatt absolute Prozentsätze zu verwenden, können Sie die fr-Einheit verwenden, die einen Bruchteil des verfügbaren Speicherplatzes darstellt.

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}
Nach dem Login kopieren

In diesem überarbeiteten Code stellen die Werte 4fr und 6fr 4 bzw. 6 Teile des verfügbaren Speicherplatzes dar , jeweils. Der Browser berechnet die tatsächlichen Breiten der Spalten basierend auf diesen Proportionen und stellt sicher, dass sie in den übergeordneten Container passen, einschließlich der Rasterlücke von 5 Pixel.

Mithilfe der fr-Einheit können Sie ein responsives Rasterlayout erstellen das sich an unterschiedliche Bildschirmgrößen anpasst und sicherstellt, dass die Rasterelemente im Hauptteil der Seite bleiben.

Das obige ist der detaillierte Inhalt vonWarum überschreitet mein fest positioniertes Rasterlayout die Körperbreite?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!