Wie erreicht man eine 100 %ige Körperhöhenverteilung mit fester Kopf- und Fußzeile?

Erreichen einer 100 %igen Körperhöhenverteilung mit fester Kopf- und Fußzeile

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:

1. 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.

2. 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.

3. 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.

4. 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!