Können Sie ein Div nur mit CSS auf 100 % Seitenhöhe strecken?-CSS-Tutorial-php.cn

Können Sie ein Div nur mit CSS auf 100 % Seitenhöhe strecken?

Barbara Streisand

Freigeben： 2024-10-30 23:48:29

Original

845 Leute haben es durchsucht

Can You Stretch a Div to 100% Page Height Using Only CSS?

Strecken eines Div auf 100 % Seitenhöhe in CSS

Um die Ästhetik und Funktionalität einer Webseite zu verbessern, müssen Elemente häufig genau so ausgerichtet werden, dass sie bestimmte Teile davon einnehmen die Seite. Eine häufige Anforderung besteht darin, ein Navigationsmenü oder eine Seitenleiste so auszudehnen, dass sie sich über die gesamte Höhe des Ansichtsfensters erstreckt und beim Scrollen über den sichtbaren Bereich hinausgeht.

Kann es ohne Javascript durchgeführt werden?

Die Frage, ob eine solche Funktion allein mit HTML und CSS erreicht werden kann, wird von Entwicklern aufgeworfen. Die Antwort ist ein klares Ja.

Die Lösung

Um dieses Problem zu beheben, ziehen Sie die folgenden CSS-Änderungen in Betracht:

Entfernen Sie z- Index, damit das Div gestreckt werden kann.
Links oder rechts weglassen für eine Spalte mit voller Höhe.
Oben oder unten für eine Zeile mit voller Breite ausschließen.

Hier ist ein Beispiel-CSS-Code, der die Lösung demonstriert:

<code class="css">html {
    min-height: 100%; /* ensures minimum viewport height */
    position: relative;
}
body {
    height: 100%; /* matches the height of the HTML element */
}
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}</code>

Nach dem Login kopieren

Der zugehörige HTML-Code:

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

Nach dem Login kopieren

Die Begründung

Der html {min-height: 100%; position: relative;}-Deklaration stellt sicher, dass das Cloud-Container-Div innerhalb des HTML-Layouts bleibt, was genaue Höhenberechnungen ermöglicht.

Das obige ist der detaillierte Inhalt vonKönnen Sie ein Div nur mit CSS auf 100 % Seitenhöhe strecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!