Wie füllt man eine Inhaltsabteilung zu 100 % mit der Körperhöhe aus, mit Ausnahme der festen Kopf- und Fußzeile?

So legen Sie fest, dass ein Inhaltsbereich 100 % der Körperhöhe einnimmt, mit Ausnahme von Kopf- und Fußzeilen mit fester Höhe

CSS ermöglicht Ihnen eine präzise Definition und vielseitige Layouts für Webseiten. Eine häufige Herausforderung besteht darin, einen Inhaltsbereich so festzulegen, dass er die gesamte Höhe der Seite einnimmt und dabei den Platz ausschließt, der von Elementen mit fester Höhe wie Kopf- und Fußzeilen eingenommen wird. Dieses Handbuch bietet eine umfassende Lösung mit reinem CSS, die mit allen modernen Browsern kompatibel ist.

Die HTML-Struktur umfasst eine Kopfzeile, ein Inhalts-Div und eine Fußzeile. Im CSS stellen wir zunächst sicher, dass die HTML- und Body-Elemente eine Mindesthöhe von 100 % und keine Ränder oder Auffüllungen haben.

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}</code>

Um den Inhaltsbereich zu positionieren, führen wir ein #wrapper-Div ein, das sich erstreckt das gesamte Ansichtsfenster mit absoluter Positionierung.

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

Im #wrapper definieren wir das Inhalts-Div (#content) mit einer Mindesthöhe von 100 %. Dadurch wird sichergestellt, dass der gesamte verfügbare Platz ausgefüllt wird.

<code class="css">#content {
  min-height: 100%;
}</code>

Um die Kopf- und Fußzeilenhöhen zu berücksichtigen, verwenden wir negative Ränder, um sie auszugleichen.

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

Dieser Ansatz stellt sicher, dass die content div nimmt den verbleibenden Platz ein, nachdem die festen Höhen der Kopf- und Fußzeile berücksichtigt wurden, was zu einem nahtlosen und dynamischen Layout führt, das sich an verschiedene Bildschirmgrößen und Geräteausrichtungen anpasst.

Das obige ist der detaillierte Inhalt vonWie füllt man eine Inhaltsabteilung zu 100 % mit der Körperhöhe aus, mit Ausnahme der festen Kopf- und Fußzeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!