Diese Frage hat hier bereits eine Antwort:

Eingewickelt in einpageWrapper Container, ich habe 3 Divs in einer Spalte. First (Header) und Last (NavWrapper) haben feste Höhen. Ich brauche die mittlere contentWrapper), um die Höhe zu dehnen, bis der übergeordnete div pageWrapper die maximale Höhe erreicht (nach Ansichtsfenster des Browsers).

Ich zeichne dasSchem dieses Problems.

Hier ist ein Geige meiner aktuellen Lösung. http: //jsfiddle.net/xp6tG

und hier der Code

CSS und HTML

html, body{
  height: 100%;
}

body{
  background-color: #E3E3E3;
}

#pageWrapper{
  margin: 0 auto;
  position: relative;
  width: 600px;
  height: 100%;
}

header{ 
  display:block;
  width: 100%;
  height: 100px;
  background: yellow;
}

#contentWrapper{
  width: 100%;
  height: 100%;
  background: blue;
}

#navWrapper{
  width: 100%;
  height: 100px;
  background: green;
}

<div id="pageWrapper">
  <header>
    Header
  </header>
  <div id="contentWrapper">
    Content
  </div>
  <div id="navWrapper">
    Nav
  </div>
</div>

Es funktioniert fast, aber die Höhe ist zu hoch, wodurch eine vertikale Bildlaufleiste angezeigt wird.