CSS, estirando verticalmente div hasta alcanzar la altura de su padre [duplicado]

Esta pregunta ya tiene una respuesta aquí:

Envuelto en unpageWrapper contenedor, tengo 3 divs en una columna. Primero (encabezado) y último (navWrapper) tienen alturas fijas. Necesito el del medio contentWrapper) para estirar en altura hasta que el divisor primario pageWrapper alcance la altura máxima según la ventana gráfica del navegador).

Dibujo laesquem de este problema. @

Aquí hay una violín de mi solución actual. http: //jsfiddle.net/xp6tG

y aquí el código

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

stá casi funcionando, pero resulta en una altura demasiado alta, lo que hace que aparezca una barra de desplazamiento vertical.