Ich versuche, eine Seite zu erstellen, die drei Divs enthält: eine Kopfzeile, eine Fußzeile und einen Inhaltsbereich. Diese sollten 100% des Bildschirms einnehmen.

Die Kopf- und Fußzeile ist klein und ändert sich nicht. Der Inhaltsbereich kann beliebig groß sein, daher habe ich @ hinzugefügoverflow:auto, damit es rollt, wenn es zu groß wird.

Das Problem ist, dass die Höhe des Bildschirms überschritten wird. Ich habe eine Geige erstellt, um zu demonstrieren:https: //jsfiddle.net/tdxn1e7p

Ich verwende das folgende CSS, um die HTML- und Körpergröße einzustellen, also dasheight:100% Tric auf dem Container wird funktionieren:

html, 
body {
    height: 100%;
}

Die Struktur meines Dokuments lautet:

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... this could be very long
  </div>
  <div>
    Footer content
  </div>
</div>

Ich habe viele Variationen dieser Art von Problem gefunden, wie zBdiese Frag, aber ich konnte keine der Antworten für mich arbeiten lassen.