"Lo que quede a la izquierda" en un diseño CSS

Question

Tengo 4 elementos dentro de un elemento contenedor. El elemento contenedor tendrá su altura configurada al 100% de la ventana del navegador. Los 4 elementos internos aparecerán apilados verticalmente el uno al otro (como es normal). Los dos primeros elementos y el último elemento deben tener una altura "natural" (es decir, lo suficiente para que se ajuste a sus contenidos). El tercer elemento debe expandirse para llenar el espacio disponible en el contenedor, después de que los otros 3 coman todo lo que necesiten.

Por lo tanto, sería algo como esto:

No puedo definir alturas explícitas para Element-1, Elemento-2, o Elemento-4, ni sé la altura del contenedor . Tampoco sé la altura natural de Element-3; Planeo usar overflow-scroll si se vuelve más grande que lo que está disponible. He añadido espacio entre los elementos para ilustración, pero también habrá espacios (márgenes/relleno) entre los elementos reales.

¿Cómo se logra esto usando HTML/CSS? Si hay que hacer concesiones para obtener un diseño decente, los consideraré. Puntos de bonificación si la técnica también se aplica horizontalmente (lo cual he necesitado en ocasiones).

Answer 1

En primer lugar, gran visual.

En segundo lugar ... ¿sería una solución de javascript fuera de la cuestión?

actualización

esto era sólo pretende ser una muestra, pero he actualizado el código para apaciguar a algunas de las personas más exigentes que hay.

http://jsfiddle.net/tsZAV/9/

Answer 2

Hay una serie de cosas que hacen que esto sea imposible en puro CSS.

1. La ventana del navegador podría ser más corta que la altura dinámica de los primeros 3 elementos.
2. No hay forma de obligar a un elemento a ocupar el resto de la altura del contenedor.
3. CSS es un lenguaje de estilo de documento, no un lenguaje de programación. Piense en escribir CSS como un conjunto de pautas que la página debe tratar de seguir, en lugar de una forma de establecer explícitamente los tamaños (aunque puede establecer tamaños explícitamente).

Esto es relativamente simple de hacer con JavaScript redimensionando el cuarto elemento. Tendrás que escuchar un evento resize para que el cuarto elemento tenga el tamaño correspondiente. Además, querrá establecer un valor de min-height para el elemento 4, en caso de que no haya suficiente espacio para el cuarto elemento.