¿Cómo implementar un diseño de pantalla parcialmente flexible con un marco de cuadrícula?

Question

Estoy tratando de implementar el siguiente diseño de pantalla utilizando un marco de cuadrícula CSS (plano), pero sin éxito:

¿Cómo puede lograr esto con un marco de cuadrícula? ¿Alguien tiene un ejemplo de código CSS/HTML para compartir? Gracias.

PD: La razón por la que quiero usar un marco es asegurarme de que este diseño funcione en todos los navegadores (cualquier seguro El marco está bien, no tiene que ser un plan).

Answer 1

Después de profundizar en este tema, tengo que entender que es imposible resolverlo con un marco de cuadrícula. El problema es que un par de alturas y anchos son derivados el uno del otro. Además, dependiendo del contenido de la célula 'central', también pueden aparecer barras de deslizamiento.

Encontré una solución larga que involucra a JavaScript. Primero defino las diferentes celdas de mi pantalla con Divs en mi HTML. Luego, recupero el ancho y la altura del documento y establezco los anchos y alturas de las celdas usando jQuery. Comienzo con valores de arreglos, luego derivados simples, luego derivados complejos.

Para el problema de la barra de diapositivas, utilicé el truco explicado aquí. Ajusto el tamaño de la columna central de acuerdo con la presencia de una barra deslizante, que depende de la altura de la celda 'central', que depende del ancho de la pantalla.

Answer 2

Yaml debería poder eso: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html

¿O tal vez fluido 960?http://designinfluences.com/fluid960gs/