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

Question

Aug 06, 2013, 03:16 AM

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

Esta pregunta ya tiene una respuesta aquí:

Obtenga div para ocupar el 100% de la altura del cuerpo, menos el encabezado y el pie de página de altura fija [duplicado] 8 respuestas

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.