Wie stelle ich ein Div auf 100 % Körperhöhe ein, ohne Kopf- und Fußzeile mit fester Höhe?

Festlegen eines Div auf 100 % Körperhöhe, ohne Kopf- und Fußzeile mit fester Höhe

CSS ermöglicht eine elegante Kontrolle über das Webseitenlayout. Eine häufige Anforderung besteht darin, Inhalte in 100 % der Körperhöhe anzuzeigen und dabei den Platz auszuschließen, der von einer Kopf- und Fußzeile mit fester Höhe eingenommen wird. Um diesen Effekt zu erzielen, ist eine sorgfältige CSS-Implementierung erforderlich, um die browserübergreifende Kompatibilität sicherzustellen.

Eine sichere Lösung besteht darin, HTML und Body auf min-height: 100 % zu setzen, um sicherzustellen, dass die Seite so weit wie möglich erweitert wird. Anschließend sollte ein Wrapper-Div mit absoluter Positionierung und Auffüllung erstellt werden, um die Kopf- und Fußzeilenhöhen zu berücksichtigen. Innerhalb dieses Wrappers kann das #content div auf min-height: 100 %; gesetzt werden, wodurch es den verbleibenden Platz ausfüllt.

Um sicherzustellen, dass Kopf- und Fußzeile fixiert bleiben, margin-top: -50px; und margin-bottom: -50px; werden aufgebracht, wodurch die der Hülle hinzugefügte Polsterung effektiv zunichte gemacht wird. Diese negativen Randwerte verschieben die Kopf- und Fußzeile aus dem Wrapper-Div und erwecken den Eindruck, dass sie über und unter dem Inhalt schweben.

Diese Technik wurde getestet und funktioniert nachweislich in modernen Browsern und sogar Internet Explorer 8 mit Modernizr (oder durch einfaches Ersetzen von Kopf- und Fußzeilenelementen durch Divs, wenn Modernizr nicht verfügbar ist). Zur weiteren Verdeutlichung steht ein Codeausschnitt mit einem Live-Beispiel zur Verfügung.

Das obige ist der detaillierte Inhalt vonWie stelle ich ein Div auf 100 % Körperhöhe ein, ohne Kopf- und Fußzeile mit fester Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!