La mejor forma de manipular varias columnas de desplazamiento

Question

Estoy en el proceso de desarrollar una aplicación web que consiste visualmente en un encabezado sobre un cuerpo que contiene cuatro columnas de contenido de altura variable. Los dioses del diseño han decretado que sea de altura fija, principalmente porque cada una de las columnas puede llegar a ser muy larga, por lo que (al ser diseñadores) están queriendo iframes con barras de desplazamiento independientes.

Cuatro (potenciales) barras de desplazamiento son lo suficientemente malas, pero si la altura de la página general se fija más alta que la ventana del navegador, ¡terminará con cinco! La solución 'normal' en un caso como este por supuesto es arreglar la altura general de la página en algo así como 700 píxeles para darle la 'mejor oportunidad' de ajuste vertical, pero no quiero hacer eso por varias razones que Espero que sea obvio.

Así que mi pregunta es: ¿Cuál sería la mejor manera de tener un contenedor de cuerpo que llena el espacio vertical disponible con cada una de las columnas haciendo lo mismo? ¿Es incluso práctico/posible? Pregunta adicional: ¿Puedo usar de manera confiable la propiedad de desbordamiento de CSS para las columnas o necesito iframes desagradables? Tengo mucha experiencia en CSS, pero casi ninguno con el uso de las dimensiones porcentuales (especialmente cuando se combina con las dimensiones en píxeles, ya que lo necesitaré para el encabezado). Además, esto debe ser compatible con los estándares y compatible con IE6.

TIA.

EDIT: No estoy buscando una solución de diseño CSS per se, mi problema es cómo acomodar la necesidad de que cada columna tenga la altura máxima posible dentro del contenedor y desplazable, sin fijar la altura del cuerpo en píxeles, a menos que sea absolutamente necesario.

Answer 1

estoy bastante seguro de que esto es exactamente lo que necesita: Liquid 4 column layout with fixed height banner and footer

Sin marcos, sin java script, y cada columna rellena automáticamente la altura disponible.

Answer 2

¿Estás hablando de algo como esto?

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div> 

El CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% } 

Esto puede no funcionar en IE6, para lo cual tendría que usar JavaScript:

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
} 

Answer 3

En respuesta a la segunda pregunta, acaba de establecer la altura propiedad en CSS para garantizar que el contenido nunca sea más grande de lo que necesita. Usted puede use overflow-y: scroll (no es válido CSS pero funciona) para forzar una barra de desplazamiento en un elemento.

Answer 4

He intentado varias permutaciones de DIV elementos anidados uno dentro de otro, un conjunto a height:100% y el otro padding:60px y no puedo encontrar una forma para conseguir el interior para tener eficaz altura 100% -60px. El problema es que las alturas porcentuales se refieren al atributo height del elemento contenedor, no la altura menos los márgenes y el relleno. Suspiro.

debo decir que me gustaría que el CSS permite una para expresar alturas como una suma (o diferencia) de porcentaje, font-relativo, y unidades de píxel (como en

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */ 

o

width: 25% - 1em; 
margin: 1.25em 1em; 

y así sucesivamente, como TeX con sus unidades fil).

Creo que su mejor opción es tener un JavaScript que examine la altura del banner y lo resta del alto de la ventana gráfica, luego establece la altura del cuadro que contiene las columnas de manera apropiada.A continuación, descubrirá qué tamaño de pantalla usan los blokes de diseñador y establecerá el valor predeterminado del cableado en el archivo CSS para que se adapte a sus pantallas.