Wie kann ich dafür sorgen, dass ein Div-Element immer die gesamte Bildschirmhöhe ausfüllt?-CSS-Tutorial-php.cn

Wie kann ich dafür sorgen, dass ein Div-Element immer die gesamte Bildschirmhöhe ausfüllt?

DDD

Freigeben： 2024-12-06 11:41:12

Original

300 Leute haben es durchsucht

How Can I Make a Div Element Always Fill the Entire Screen Height?

Aufrechterhaltung eines Vollbild-

Unabhängig vom Inhalt

Erstellen eines

Ein Element, das unabhängig von seinem Inhalt die gesamte vertikale Höhe des Bildschirms einnimmt, ist eine häufige Herausforderung bei der Webentwicklung. Ist das machbar?

Lösung

Der folgende CSS-Ansatz erzielt diesen Effekt konsequent:

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  min-height: 100%;
}

Nach dem Login kopieren

Diese Lösung funktioniert wie folgt:

Setzen Sie die Höhen- und Randattribute für die HTML- und Body-Elemente auf 0, um den Browser zu eliminieren Ränder.
Mindesthöhe auf 100 % für das #wrapper-Element setzen, um sicherzustellen, dass es den gesamten verfügbaren vertikalen Platz einnimmt.

Zusätzliche Hinweise

Für ältere Versionen des Internet Explorers (IE6 und niedriger) ist eine zusätzliche CSS-Regel erforderlich, um zu erzwingen, dass #wrapper den gesamten Inhalt ausfüllt Bildschirmhöhe.
Durch die Verwendung von „min-height“ anstelle von „height“ können zusätzliche Inhalte bei Bedarf über die Bildschirmhöhe hinausragen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Div-Element immer die gesamte Bildschirmhöhe ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich verhindern, dass lange Wörter meine Div-Layouts beschädigen? Nächster Artikel：Wie kann ich verhindern, dass lange Wörter aus meinen Divs herausbrechen?

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

Neueste Artikel des Autors