На этот вопрос уже есть ответ:

Завернутый вpageWrapper контейнер, у меня есть 3 деления в столбце. Первый (заголовок) и последний (navWrapper) имеют фиксированные высоты. Мне нужен средний contentWrapper) растягивать по высоте, пока родительский div pageWrapper не достигнет максимальной высоты в соответствии с окном просмотра браузера).

Я рисую Схемы этой проблемы.

Вот фидл моего текущего решения. http: //jsfiddle.net/xp6tG

и вот код

CSS и 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>

Это почти работает, но это приводит к слишком большой высоте, из-за чего появляется вертикальная полоса прокрутки.