Wie lässt sich ein CSS-Div auf 100 % der Seitenhöhe ausdehnen, einschließlich gescrollter Bereiche?-CSS-Tutorial-php.cn

Wie lässt sich ein CSS-Div auf 100 % der Seitenhöhe ausdehnen, einschließlich gescrollter Bereiche?

DDD

Freigeben： 2024-10-31 10:20:01

Original

606 Leute haben es durchsucht

How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?

Ein CSS-Div auf 100 % Seitenhöhe strecken

Sie benötigen eine CSS-Lösung, um ein Div so zu strecken, dass es die gesamte Seitenhöhe umfasst, Einschließlich gescrollter Bereiche sucht diese Frage nach einem HTML/CSS-Ansatz, um diesen Effekt zu erzielen.

Die vorgestellte Lösung beinhaltet das Entfernen spezifischer CSS-Eigenschaften:

Z-Index: Für andere Verwendungszwecke als die Hintergrundanzeige.
Links/Rechts: Für Spalten voller Höhe.
Oben/Unten: Für Spalten voller Breite Zeilen.

Zusätzlich wird das folgende CSS bereitgestellt:

<code class="css">html {
    min-height: 100%;
    position: relative;
}

body {
    height: 100%;
}

#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Remove for non-background uses */
}</code>

Nach dem Login kopieren

Bei Implementierung zusammen mit dem folgenden HTML:

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

Nach dem Login kopieren

Diese Lösung stellt sicher, dass die # Das Cloud-Container-Div nimmt die gesamte Höhe der Seite ein, einschließlich der gescrollten Bereiche. Die bereitgestellte Erklärung beleuchtet die Rolle der HTML-Eigenschaften „Mindesthöhe“ und „Position“ sowie die Art und Weise, wie der Z-Index, links/rechts und oben/unten angepasst werden können, um das gewünschte Ergebnis zu erzielen.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein CSS-Div auf 100 % der Seitenhöhe ausdehnen, einschließlich gescrollter Bereiche?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!