Full page layout in HTML mit Scroll-center

Hinweis: ich gehe davon aus HTML5 und CSS3 hier, hielt sich aber auf Eigenschaften, die in den meisten Browsern funktionieren. Der HTML5 kann leicht ausgetauscht werden für HTML 4.01.

Zu erstellen, die Art von layout, das Sie möchten, beginnen wir mit einigen grundlegenden HTML:

<div id="wrapper">
  <header> Header </header>
  <div id="content">
    <section id="left"> Left </section>
    <section id="center"> Center </section>
    <section id="right"> Right </section>
  </div>
  <footer> Footer </footer>
</div>

Die Schwierigkeit ist dieses styling nach Ihren Bedürfnissen. Ausgehend von der Einstellung einer 100% Höhe auf, so viel wie möglich, zusammen mit geeigneten überlauf Werte, wir erhalten etwas, das sehr nah an, was Sie wollen:

html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { height: 100%; }
header, footer { height: 50px; }
#content { height: 100%; overflow: hidden; }
section { float: left; overflow: auto; height: 100%; }
#left, #right { width: 100px; }
#center { width: 300px; }

Leider, das macht das layout exakt 100px (die kombinierte Höhe der Fußzeile und Kopfzeile) zu groß. Um dies zu beheben, müssen wir verringern die Höhe der #content um den gleichen Betrag, aber die standard-box-Modell nicht für diese erlauben. Geben Sie die box-sizing (die unterstützt von allen gängigen Browsern außer dem IE7), die wir verwenden können, ändern Sie den box-Modell verwendet wird. Mit der border-box box-Modell, die Polsterung ist enthalten in der Höhe und als solche können wir "entfernen" die notwendige Höhe von #content:

#content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 50px 0; margin: -50px 0; }

Siehe auch dieses JSfiddle demo und die full-screen-Ergebnis für weitere details.

Dachte ich eine Lösung, es ist nicht elegant, aber es funktioniert. Ich erstellte eine Tabelle auf 100% Höhe. Ich habe dann Hinzugefügt, eine Funktion, die ausgeführt wird, auf load und Größe. Dieser erhält die Höhe des Fensters und zieht es auf die Höhe der Kopf-und Fußzeile, es setzt dann die Höhe eines div in zentral zu sein, dass die Verbleibende Höhe. Die größte Schwierigkeit war, kommen mit eine genaue Fenster-Höhe, durch verschiedene bits googeln, kam ich auf die folgende, die scheint gut zu funktionieren:

function getWindowHeight() {
   var height = 0;
   var body = window.document.body;

   if (window.innerHeight) {
        height = window.innerHeight;
   } else if (body.parentElement.clientHeight) {
       height = body.parentElement.clientHeight;
   } else if (body && body.clientHeight) {
       height = body.clientHeight;
   }
   return height;

}