Wie lässt sich ein Div mit dynamischem Inhalt so gestalten, dass er die verbleibende Körperhöhe nach Kopf- und Fußzeile ausfüllt?

Stellen Sie sicher, dass ein dynamisches Inhalts-Div die verbleibende Körperhöhe nach Kopf- und Fußzeile ausfüllt.

Erzielen eines Inhalts-Div, das die verbleibende Körperhöhe nach einer Kopf- und Fußzeile mit fester Höhe abdeckt eine häufige CSS-Herausforderung. Die folgende umfassende Lösung behebt dieses Problem in modernen Browsern und Internet Explorer 8.

In diesem Beispiel wickeln Sie den Inhalt in ein „#wrapper“-Div ein, das absolut positioniert ist und sich über das gesamte Ansichtsfenster erstreckt. Legen Sie die Eigenschaft „min-height“ auf 100 % fest, um sicherzustellen, dass sie mindestens diese Höhe einnimmt, und fügen Sie einen Abstand hinzu, um die Kopf- und Fußzeile zu berücksichtigen.

Verschachteln Sie den Inhalt in einem „#content“-Div mit einem „min-height“ von 100 %, um die verbleibende Höhe zu belegen. Geben Sie der Kopf- und Fußzeile feste Höhen und passen Sie deren Ränder negativ an, um den Abstand im „#wrapper“-Div zu kompensieren.

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

Diese Lösung passt die Höhe des Inhalts-Divs dynamisch an die Größe des Ansichtsfensters an und stellt so sicher Es füllt den verbleibenden Körperraum nahtlos aus und bietet gleichzeitig Platz für Kopf- und Fußzeile.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Div mit dynamischem Inhalt so gestalten, dass er die verbleibende Körperhöhe nach Kopf- und Fußzeile ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!