Wie stelle ich eine Div-Höhe auf 100 % des Körpers minus Kopf- und Fußzeile mit fester Höhe ein?

Festlegen einer Div-Höhe auf 100 % des Textkörpers minus Kopf- und Fußzeile mit fester Höhe

Wenn Sie eine Inhalts-Div festlegen möchten Um 100 % der Körperhöhe einzunehmen, mit Ausnahme von Kopf- und Fußzeilenelementen mit fester Höhe, ist der Einsatz von CSS die ideale Lösung. Hier ist eine kugelsichere Technik, die browserübergreifend funktioniert:

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

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

Lassen Sie uns die Schlüsselelemente dieses Ansatzes aufschlüsseln:

• Absolute Positionierung: Das #wrapper div ist absolut positioniert, sodass es sich auf die volle Höhe des Ansichtsfensters ausdehnen kann.
• Negative Ränder: Kopf- und Fußzeilenelemente verwenden negative Ränder, um den #Wrapper zu überlappen. Dadurch entsteht die Illusion, dass sie fixiert sind, während dem #content-Div der nötige Platz gegeben wird.
• Mindesthöhe: Sowohl für das #wrapper- als auch für das #content-Div ist eine Mindesthöhe von 100 % festgelegt. Dadurch wird sichergestellt, dass sie den verbleibenden Platz ausfüllen, der nicht von der Kopf- und Fußzeile eingenommen wird.

Diese Technik bietet eine browserübergreifende Lösung, die das Inhalts-Div zuverlässig auf 100 % der Körperhöhe abzüglich fester Werte festlegt. Höhe der Kopf- und Fußzeilenelemente.

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