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

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%;
}

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;
}

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!