Maquetación algo compleja

[cojonuo]

Hola, llevo todo el día intentandolo y no hay manera a ver si podian ayudarme.

Tengo que maquetar una pagina con 3 elementos, cabecera, y un cuerpo con dos columnas.

La cabecera tiene un tamaño concreto en px, ya que es un menu con botonera, pero el cuerpo debe ocupar el resto de la página. Cada columna tiene un overflow:auto para que les salgan scroll si se desvorda su contenido, la idea es quitarse la barra de scroll del navegador.

Maquetando con div lo consigo todo pero tengo el problema que el div del cuerpo a 100% y la cabecera a 100px pues se sale del alto ya que es más de 100%.

He maquetado tambien con table que si me permite tener un row con 100px y el otro a 100% y lo coje bien, el problema es que el contenido dentro del cuerpo si es más grande, parece como si el overflow no sirviese y la celda crece con su tamaño, que es lo que quiero evitar.

Se que con javascript lo puedo hacer sin muchos problemas, pero preferiría ahorramelo.

No se si lo que pido se puede hacer, de todas formas muchas gracias.

[Calizman]

Saludos cojonuo!!

Te dejo esta web, en ella encontraras diferentes tipos de estructuras, talvez te sirva algo de esto no?

www.librosweb.es

[jomaruro]

Hola:

Y yo te recomiendo esta página, tiene varios ejemplos de páginas; mírate en concreto esta, si no me equivoco es, en concreto, lo que buscas.

Saludos.

[cojonuo]

Muchas gracias.

He probado las maquetaciones que me comentais pero aunque se parecen a lo que busco, siguen teniendo el mismo problema y no se como solucionarlos. En este caso la cabecera y el cuerpo se muestra correctamente pero necesito que el cuerpo admita un overflow, y estos no lo permiten.

[Solid]

Tenés que medir el viewport (es decir la zona activa de documento real, no la ventana ni mucho menos la resolución de pantalla) y usar esas medidas.

Esto es Javascript, asique si por ejemplo usaras Prototype podrías solucionarlo asi...

Código HTML:

var alturaResto = 100; //sumatoria de todas las alturas explícitas
$("#cuerpo").setStyle({"height": (document.viewport.getHeight() - alturaResto) + "px"});

y listo, después podrías agregar un escuchador de eventos para que cuando cambie la altura del viewport se reajuste la altura del cuerpo.

[pzin]

¿Te funcionaría si le pones un margen negativo de cien píxeles a las columnas que llevan el contenido? Es lo primero y creo que lo único que se me ocurre.

Código css:

margin-bottom:-100px;
 

[cojonuo]

Gracias por las aportaciones, al final he optado por utilizar javascript, lo que pasa que todo esto es dentro de una pagina con ASP y Algunos UpdatePanel que son los que contienen las columnas. Ahora he enlazado la funcion para hacer el resice a los eventos onload y onresize de javascript. Sin embargo sigo teniendo un problema, la columna de la derecha se actualiza al pulsar un enlace de la columna de la izquierda, usando updatepanels y al hacer esta actualizacion recarga la columna derecha y no pasa por el javascript así que vuelve a dimensionarse mal, me haría falta enlazarlo de alguna manera. Ya se que este no es el foro adecuado pero como venía a cuento por eso lo he puesto, pido disculpas si hago mal.

Un saludo.