Tres DIV apilados verticalmente con medio desplazable

Question

¿Es posible apilar tres DIV verticalmente y tener solo el div interior medio desplazarse verticalmente? No quiero usar alturas de píxeles, porque los DIV están dentro de un cuadro de diálogo que se puede redimensionar. Algo como esto (perdón por mi arte ASCII pésimo):

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+ 

El objetivo es que la cabecera y el pie de página y fija y, a medida que crece el diálogo, el div media crecería verticalmente. Tal vez solo estoy siendo estúpido, pero he estado luchando con esto durante las últimas horas y parece que no puedo hacerlo bien. Es probable que los tres DIV tengan que estar dentro de "otro" DIV, pero cuando lo hago y establezco la altura al 100%, crece a medida que crece el DIV medio. Nuevamente, es probable que sea algo tonto que no explique. También intenté usar una TABLA sin ningún resultado.

Gracias por cualquier ayuda.

Answer 1

Esto debería funcionar

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div> 

---

editado - Para cabecera posición fija y pie de página en el diálogo modal

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div> 

Answer 2

Revisando esto para 2017. Con FlexBox, esto ahora se puede hacer sin tener que definir explícitamente la altura del encabezado y el pie de página. Esto funciona, al menos prefijado, en todos los navegadores que actualmente tienen una cuota de mercado significativa, excepto IE < = 10, que todavía tiene una cuota del 1-5% dependiendo de a quién se lo pregunte. Debido a que generalmente se trata de un mecanismo visual/de usabilidad y no bloquea la funcionalidad, al usar flexbox para este caso al menos debería dejar su página utilizable para usuarios de navegadores no compatibles.

Todo lo que necesita hacer es envolver su cabecera, contenido y pie de página en un div que tiene una altura explícita (por ejemplo, el cuerpo o un niño de la misma con la altura del 100%), con estilos:

display: flex; 
    flex: auto; 
    flex-direction: column; 

Y aplicar el estilo al panel desplazable:

overflow-y: auto; 

Si desea que el panel desplazable para crecer de modo que se utilice todo el espacio vertical:

flex-grow: 1; 

y en la cabecera y el pie (necesaria para Safari e IE 10):

flex-grow: 0; 

https://jsfiddle.net/ornsk10a/