Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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
687 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!

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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage