Esta pergunta já tem uma resposta aqui:

Embrulhado em umpageWrapper container, eu tenho 3 divs em uma coluna. Primeiro (cabeçalho) e último (navWrapper) têm alturas fixas. Eu preciso do meio contentWrapper) para esticar a altura até que a página div principalWrapper atinja a altura máxima de acordo com a janela de exibição do navegador).

Eu desenho oesquem deste problema.

Aqui está um violão da minha solução atual. http: //jsfiddle.net/xp6tG

e aqui o código

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

Está quase funcionando, mas resulta em uma altura muito alta, o que faz com que uma barra de rolagem vertical seja exibid