Wie erstelle ich eine Div-Spanne von 100 % der Seitenhöhe nur mit CSS?

So strecken Sie ein Div ohne JavaScript auf 100 % Seitenhöhe

Beim Entwerfen einer Webseite möchte man häufig eine Navigationsleiste erstellen oder ein anderes Element, das sich über die gesamte Höhe der Seite erstreckt, nicht nur über den sichtbaren Bereich des Ansichtsfensters. Um dies zu erreichen, untersuchen wir eine reine CSS-Lösung.

CSS-Lösung:

html {
    min-height: 100%; /* Ensure it's as tall as the viewport */
    position: relative;
}
body {
    height: 100%; /* Force body to match HTML's height */
}
#navigation-bar {
    position: absolute;
    top: 0; /* Top edge of the page */
    bottom: 0; /* Bottom edge of the page */
    left: 0; /* Left edge of the page */
    right: 0; /* Right edge of the page */
}

Dieses CSS positioniert das Navigationsleistenelement absolut innerhalb des Ansichtsfensters und stellt so sicher Füllt die gesamte Seitenhöhe ohne Einschränkungen beim Scrollen aus.

Erklärung:

• html legt eine Mindesthöhe auf 100 % fest, um dem Ansichtsfenster zu entsprechen . Dadurch wird verhindert, dass das Div abgeschnitten wird.
• body setzt die Höhe auf 100 %, um zu erzwingen, dass sie mit der Höhe des HTML-Elements übereinstimmt.
• Position: absolut Entfernt das Div aus dem normalen Dokumentenfluss, sodass es im Ansichtsfenster positioniert werden kann.
• oben: 0 und unten: 0 erweitern das Div vollständig Höhe der Seite.

Zusätzliche Hinweise:

• Für eine Spalte voller Höhe entfernen Sie links oder rechts aus der #Navigationsleistenauswahl.
• Für eine Zeile mit voller Breite entfernen Sie oben oder unten.
• Wenn Das Div ist nicht als Hintergrund gedacht. Entfernen Sie z-index: -1; aus dem Selektor.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Div-Spanne von 100 % der Seitenhöhe nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!