Establezca la altura de div en 100% de los padres

Quiero el siguiente diseño para mi página web:

| header | | navigation | details | | | | 

Donde el panel de navegación (contenido generado dinámicamente) contiene cientos de elementos. Quiero que se cree una barra de desplazamiento vertical en el panel de navegación, de modo que el panel tenga el alto de la ventana menos la altura del encabezado.

Mi página tiene aproximadamente la siguiente estructura:

  

Con el siguiente CSS:

 #navigation { float: left; width: 400px; height: 100%; overflow: auto; } #details { margin-left: 420px; } 

Esto funciona principalmente, excepto que el panel de navegación obtiene el 100% de la altura de la ventana, no el 100% de la altura de la ventana menos la altura del encabezado. Prefiero no establecer explícitamente la altura del encabezado si puedo evitarlo. Soy completamente nuevo en el desarrollo web, así que no me importa leer. ¿Qué debo hacer para lograr el diseño que quiero?

Debe asegurarse de que la etiqueta del cuerpo y el contenedor de contenido también tengan alturas del 100%. Debe establecer explícitamente la altura de los elementos principales para que el niño obedezca.

 body { height: 100%; } #content { height: 100%; } 

Sin embargo, esto no tiene en cuenta el posicionamiento del encabezado. La siguiente publicación muestra una técnica que utiliza el hack rápido de altura mínima de Dustin Diaz y un margen negativo en el contenedor de contenido para lograr el 100% de altura sin interferir con el encabezado:

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/

Usted dijo “Prefiero no establecer explícitamente la altura del encabezado si puedo evitarlo “. Estoy bastante seguro de que no puedes evitarlo sin cambiar a tablas. Dicho esto, aquí hay un ejemplo de cómo puedes hacerlo usando divs con la altura del encabezado establecida en 50px:

       

Una nota: si desea agregar fondos a las áreas de navigation y / o details , tendrá que aplicarlas a sus respectivas divisiones de shell que las contienen. Todo el contenido real, sin embargo, iría en los divs internos.

Tienes que establecer AMBOS html y altura del cuerpo al 100%: html, body {height: 100%;}