Wie erweitere ich ein DIV-Element bis zum Ende der Seite?-CSS-Tutorial-php.cn

Wie erweitere ich ein DIV-Element bis zum Ende der Seite?

Barbara Streisand

Freigeben： 2024-11-27 20:40:11

Original

425 Leute haben es durchsucht

How Do I Make a DIV Element Expand to the Bottom of the Page?

DIV-Erweiterung bis zum Seitenende erzwingen

Im Webdesign ist es manchmal notwendig, dass sich ein DIV-Block bis zum Seitenende erstreckt, sogar in das Fehlen von Inhalten. Dies kann eine Herausforderung sein, da DIVs normalerweise nur so weit erweitert werden, wie es für den Inhalt erforderlich ist.

Problemübersicht

Beachten Sie das folgende Markup:

<body>
  <div>

Nach dem Login kopieren

Das Ziel besteht darin, das DIV mit id="content" dazu zu zwingen, sich vertikal auszudehnen und unabhängig davon den unteren Rand der Seite zu erreichen Inhalt.

Lösung

Das Problem liegt nicht in der Höhe des Inhalts-DIV, sondern im Container, der ihn umgibt. Um dies zu beheben, wenden Sie das folgende CSS auf die HTML- und Body-Elemente an:

html, body { height:100%; }

Nach dem Login kopieren

Dadurch wird sichergestellt, dass der Browser die Seite mit einer Höhe von 100 % rendert, sodass der Inhalts-DIV seine Grenzen vollständig ausschöpfen kann.

Zusätzliche Überlegungen

Obwohl diese Lösung die meisten Fälle abdeckt, ist sie wichtig Bitte beachten Sie, dass verschiedene Browser Höhenberechnungen möglicherweise etwas unterschiedlich implementieren. Hier finden Sie einige hilfreiche Ressourcen, die weitere Informationen liefern Einblick:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Zusätzlich, Umfassende Informationen zur Browserkompatibilität finden Sie unter http://quirksmode.org/.

Das obige ist der detaillierte Inhalt vonWie erweitere ich ein DIV-Element bis zum Ende der Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!