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

CSS ermöglicht es Ihnen, präzise zu definieren 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.

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

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

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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.

#content {
  min-height: 100%;
}

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

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

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

Dieser Ansatz stellt sicher, dass das Inhalts-Div den verbleibenden Platz einnimmt, 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.