Heim > Web-Frontend > CSS-Tutorial > Wie erreicht man eine 100 %ige Körperhöhenverteilung mit fester Kopf- und Fußzeile?

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

Mary-Kate Olsen
Freigeben: 2024-11-03 22:10:02
Original
618 Leute haben es durchsucht

How to Achieve a 100% Body Height Div with Fixed Header and Footer?

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>
Nach dem Login kopieren
<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage