Layout de alto dinámico según resolución

[Senku]

No sé si esto va exactamente aquí en CSS, pero como la web está maquetada en XHTML y CSS exclusivamente...

La cosa es que el layout me trae loco por el simple hecho del tipo de pantalla en el que lo veo. Esta web con la que trabajo ahora tiene la siguiente extructura:

[Banner con imagen de título de alto fijo 100px top 0px]
[Contenido... *]
[Menú horizontal CSS de dos niveles (basado en ejemplos del compañero Mikimoro -gracias!!-) de alto fijo 45px y bottom 0px]

Bien, pues el contenido, según las secciones de la web contiene texto, imágenes, o combinaciones de ambas, me supone un problema por la resolución. Lo pruebo en dos portátiles a la vez, uno con un alto de 800px y el otro con un alto de 768px y de momento las pruebas las hago en Firefox.

Al cambiar la resolución de un pc al otro y si en un FF le tengo puesta alguna barra de herramientas de más o de menos, la cosa es que está claro que no puedo dejarle al contenedor "Contenido" un alto en "px" o "em" porque se crean espacios en blanco (bueno, con fondo de color, pero es para entendernos). He probado a combinar altos en "px" para las "divs fijas de arriba y abajo" con un alto en "%" pero no funciona del todo bien, sigo con problemas. Por supuesto ponerle "%" a todo no procede porque la cosa no queda muy bien: el banner está ajustado exactamente a los 100px de alto y el menú a los 45px de alto y si le pongo "%" en cuanto el alto cambia por tener una barrita de más o de menos o porque la pantalla tiene más "px" de alto, ya la liamos.

Existe alguna forma de dinamizar el alto de "Contenido" sin tocar lo de arriba y lo de abajo y para que cambie lo que cambie el alto de la zona visible del explorador este se adapte perfectamente a él?

Muchas gracias

[Calizman]

Saludos!!

Posiblemente dinamizar el contenido no sea lo mas correcto, a mi punto de vista, lo mejor en esa situacion es hacer que la "scroll-bar" aparezca. Eso lo haces poniendo en tu .css algo como esto:

body {
overflow: auto;
}

Claro, el overflow solo lo agregas a todos los estilos que tienes dentro de tu -body-.

Espero te sirva, Hasta Luego!!

[Mikmoro]

Hola, Senku. Muy amable, aunque me cambies el nick (Mikmoro, sin la segunda "i" latina).

Puede que lo que busques sea algo como lo de este ejemplo de las FAQ de CSS, que trata de cómo hacer que el pie esté siempre abajo, independientemente del alto de la página, y que acompañe hacia abajo al contenido cuando éste rebase el alto de la pantalla.

Ya dirás.

[Senku]

Hola a ambos,

Gracias por las respuestas y, Mikmoro, disculpa por cambiarte de nick, fue así rápido de memoria y claro, a veces ésta falla ;)

He conseguido que toda la web está bien y el pie se mantiene en su sitio pero ahora me asalta vilmente un problema con una galería de imágenes del tipo con galería de thumbs justo sobre el pie y al rolloverar aparece la imagen en grande un poco más arriba y tal.

El caso es que la galería está dentro del contenido y claro, si quitamos barritas de herramientas en el FF, o la barra de tabs, o lo que sea, tenemos el header, y tenemos el pie con el menú, perfecto, pero el contenido, que con las barritas ocupaba un (por poner) 75%, ahora sin ellas ocupa un 78%. Como la barrita de thumbs de la galería estaba abajo de todo, sube y baja según quitemos o pongamos cosas o cambie la resolución de la pantalla y queda un poco chafas.

Ya sé que la solución fácil es poner la barra de thumbs arriba y a cascarla, pero el dueño de la página la quiere abajo. A ver cómo hago.. ;)

Un saludo

[Mikmoro]

Bueno, cuando puedas ya mostrarás, porque de momento no me hago idea.