Ausgangssituation:
In einem Webseitenlayout möchten Sie ein Inhalts-Div erstellen, das die gesamte Körperhöhe ausfüllt, mit Ausnahme der Kopf- und Fußzeile mit fester Höhe.
Lösung:
Legen Sie eine Grundlinie für die Mindesthöhe fest:
Deklarieren Sie HTML- und Körperelemente mit der Mindesthöhe: 100 %;. Dadurch wird sichergestellt, dass sie sich bis zur vollen Fensterhöhe erstrecken.
Erstellen Sie einen Wrapper für den Inhalt:
Erstellen Sie ein #wrapper-Div, das alles enthält, mit Ausnahme der Kopf- und Fußzeile. Positionieren Sie es absolut und beschränken Sie es auf die vollen Fensterabmessungen.
Definieren Sie den Inhaltsbereich:
Erstellen Sie im #wrapper einen #content div für den Hauptinhalt. Stellen Sie die Mindesthöhe auf 100 % ein, um den verbleibenden Platz auszufüllen.
Kopf- und Fußzeile positionieren:
Kopf- und Fußzeilenelemente hinzufügen mit feste Höhen und passende Farben. Verwenden Sie die Eigenschaften „margin-top“ und „margin-bottom“ mit negativen Werten, um sie über und unter dem #wrapper zu positionieren.
Implementierung:
<code class="css">html, body { min-height: 100%; padding: 0; margin: 0; } #wrapper { padding: 50px 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #content { min-height: 100%; background-color: green; } header { margin-top: -50px; height: 50px; background-color: red; } footer { margin-bottom: -50px; height: 50px; background-color: red; }</code>
<code class="html"><div id="wrapper"> <header>dfs</header> <div id="content"> </div> <footer>sdf</footer> </div></code>
Dieser Code stellt sicher, dass das #content-Div die gesamte Körperhöhe ausfüllt und gleichzeitig die Kopf- und Fußzeile mit fester Höhe berücksichtigt. Es funktioniert in modernen Browsern und IE8 mit dem Modernizr-Skript (oder kann so geändert werden, dass Divs anstelle von Kopf- und Fußzeilenelementen verwendet werden).
Das obige ist der detaillierte Inhalt vonWie erreicht man eine 100 %ige Körperhöhenverteilung mit fester Kopf- und Fußzeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!