Diseño fluido vertical

[gorkreg]

Estoy creando mi primera página web con un diseño fluido basado en porcentajes. El caso es que el cliente quiere que sea fluido tanto horizontal como verticalmente. He creado una regla CSS para el body y le he dado un ancho de 100% y funciona perfectamente pero si le doy un alto del 100% no pasa absolutamente nada. He probado dar la altura a una division "container" pero seguimos en las mismas.
Es un sitio que contiene solo galerías sin texto, con un encabezado y un pie de página. El contenido está dividido en dos columnas, la derecha con una película Flash que contiene las imágenes y la izquierda con un menu y algunos otros enlaces. ¿Alguna idea al respecto?

[Raulmmmm]

Quita el DOCTYPE y verás como funciona . Para que funcione también con el DOCTYPE, pon al principio del CSS:

Código HTML:

html, body { height: 100%; }

¿Alguien sabe por qué pasa esto?

[Mikmoro]

Iniciado por Raulmmmm

Quita el DOCTYPE y verás como funciona . Para que funcione también con el DOCTYPE, pon al principio del CSS:

Código HTML:

html, body { height: 100%; }

¿Alguien sabe por qué pasa esto?

Cada elemento que quiera tener un tamaño en porcentaje, deberá tomar el porcentaje en relación al tamaño de su elemento padre. Aunque body parece el elemento base no es así, sino que es el primer elemento hijo de html, que sí es realmente el elemento base.

Un body 100% es un 100% de... nada, porque su padre no tiene tamaño. Por eso si damos un tamaño al elemento padre html (100%) como es la raiz no necesita tomar como referencia su elemento padre, sino que es 100% de la página, del área de visualización. De tal manera, al tener ya un tamaño, un 100% en body es el 100% de html, y por eso sí funciona.

Espero haberme explicado.

Mikel.

[Raulmmmm]

Muchas gracias por la explicación Mikmoro .

[desendoll]

ya he aprendido otra cosa nueva, gracias Mikmoro xD

[gorkreg]

Gracias por las respuestas. He probado el dar una altura del 100% al html pero me sigue saliendo el scroll. Como decía, dar la anchura de 100% al body me funciona correctamente. El problema está en la altura. He probado quitar el DOCTYPE, dar altura y anchura de 100% solo al html, solo al body y a los dos pero nada, no se ajusta verticalmente.
Mikmoro, por favor, rescátame. Ya me había rendido pensando que la página no se podía ajustar verticalmente pero parece que hay alguna posibilidad.

[Mikmoro]

Sería bueno que pudiéramos ver la página, para hacernos una idea de qué es lo que intentas hacer y lo que tienes hasta ahora.

Mikel.

[gorkreg]

Gracias Mikmoro. Aquí te envío el link a la página (http://www.denaflows.com/prueba/conciertos.html). Tengo otro problema con el Simple Viewer ya que le tengo que dar un alto fijo en píxeles pues si le doy un porcentaje se me queda arriba con una altura de unos 300 píxeles. Como todavía no está claro lo de la altura total de la página en porcentajes lo dejo para cuando solucione esto primero. En todo caso, no entiendo por qué sucede pues en el archivo html que incluye la peli flash al alto y ancho está a 100%.
Otra cosa que quiero eliminar pero no consigo hacerlo es el scroll horizontal que aparece debajo del submenu. Solo aparece en IE o en Firefox una vez entro en alguna galería (solo funciona el enlace a la primera - Absythe Minded).
Gracias de nuevo y a ver si puedo solucionar esto.

[Mikmoro]

Pero el alto del 100% te funciona correctamente. Sólo que claro, tienes elementos de tamaño fijo como el menú lateral y los recuadros de debajo de éste, que hacen que la web no pueda reducir más de un punto de altura, pero funcionar funciona.

Recuerda también que es conveniente dar un tamaño mínimo de ancho, si no, conforme vas reduciendo la anchura del navegador la web empieza a colapsar y todos los elementos se van a hacer puñetas. Deberías fijar mínimos tanto de ancho como de alto en tu caso.

Si quieres ver que el alto del 100% funciona bien, pon tu resolución a 1024 x 769 y luego a 1280 x 1024, y verás que en ambos casos el pie está abajo del todo, ocupando toda la altura de la pantalla, que es lo que debe hacer la propiedad al 100%.

Mikel.

[Mikmoro]

Lo del scroll del menú posiblemente se deba al padding que tienes en el selector "a" de la hoja de estilo del iframe:

a {iframe_estilos.cs... (line 26)
color:#FFFFFF;
display:block;
padding:4px 4px 4px 9px;
text-decoration:none;
}

Al tener display block ya está ocupando el 100% de ancho, y además le das 4px de relleno a izquierda y derecha hace que ocupe más del 100%, por eso el overflow auto hace que aparezca el molesto scroll horizontal.

Supongo.

Lo del iframe del flash no lo he entendido.

Mikel.

[gorkreg]

Mikmoro, estás siendo mi salvación. Ya he conseguido entender el tema del diseño fluido vertical. Funciona. Ahora solo me queda "prueba y error" para dar con los min-height adecuados. Espero que todo vaya bien por ahí.
He quitado el display:block de las anclas del iframe y ya no aparece el scroll vertical... en Firefox, pero me sigue apareciendo en Explorer 6.
Lo del iframe del flash ya está solucionado con los porcentajes. De todos modos te remito a esta pregunta que hice ayer pero que no me han respondido. No tiene que ver con CSS pero igual sabes algo tú.
http://www.forosdelweb.com/f91/embeber-simple-viewer-pagina-html-multiples-galerias-607767/
No se si me explico muy bien pero si sabes algo del tema lo podría intentar otra vez.
Gracias de nuevo.
Gorka

[Mikmoro]

Yo te recomendaría no quitar el display block de los enlaces, sino el padding de la derecha:

padding:4px 0px 4px 9px;

vamos, ponerlo a cero, y creo que debería resolverse lo de explorer.

En cuanto al programa de las galerías, lo siento pero no lo he usado nunca, y de flash no sé casi nada. Podrías intentar cargarlas con Ajax en lugar de con un iframe, pero no sé si será posible en tu caso.

Mikel.

[gorkreg]

Gracias de nuevo. Pues estoy teniendo muchos problemas con los menus de la izquierda. He dado una altura de 100% a todo el documento y luego un 15% al header, un 80% al content y un 5% al footer. El header y el footer tienen ya unos min-height en píxeles. Tanto la película Flash como la división "menus" (que contiene toda la columna izquierda) tienen una altura de 100% (toda la altura del content). Ahora, dentro de esa división "menus", he dado alturas a las distintas cajas hasta llegar al 100% (15% para el "abecedario", 53% para el menu "subnav", 13% para la caja primera y otro 13% para la caja segunda. Además de tres bordes inferiores de 2%. Total=100%). Hecho esto, me espero que las cajas se vayan desmoronando al disminuir el tamaño de la pantalla pero dentro de la división menus. Lo que sucede es que se desmoronan hacia abajo por encima del footer. He probado de todo pero no se cómo arreglarlo. ¿Quizá haya demasiado material a la izquierda y deba replantearme la distribución? He puesto la nueva página otra vez en el servidor (http://www.denaflows.com/prueba/conciertos.html).
Ya entiendo lo que quieres decir al "quitar el padding de la derecha" pero, sorprendentemente, quitando ese e incluso el de la izquierda, todavía sale el scroll.

[Mikmoro]

Bueno, yo no creo que en la web todos los elementos deban ser fluidos, y menos de alto. Por ejemplo en el menú de la iquierda, lo que yo haría sería dejar un alto fijo en el abecedario y las dos cajas de abajo, y que la que cambie de tamaño sea el menú.

Lo que sí creo que necesitas es dar un mínimo de ancho al body, de manera que cuando el navegador encoja más de un determinado punto, las cosas se queden en su sitio y aparezca el scroll. Esto es lo que evita que las cajas colapsen y se empiecen a montar y cosas así.

Lo del iframe del menú y el scroll horizontal, habría que mirarlo con mucho detenimiento.Quizá si le pones a los enlaces un margin: 0 1px; se soluciona.

Mikel.

[gorkreg]

Gracias por tu paciencia. Yo lo que no entiendo es esto. Te pongo un ejemplo (http://www.denaflows.com/prueba/conciertos.html). Para hacer una prueba, he quitado las 2 cajas de abajo y he dejado solo el abecedario y el submenu. Estos dos están en una división llamada "menus". He dado las siguientes medidas de alto:

-toda la columna izquierda (#menus) = 100% (100% del "content", que es el elemento padre)

-abecedario (#menus table)= 15%
-submenu de bandas (#subnav) = 85%
TOTAL=100%

Teniendo en cuenta esto, al reducir el alto de la pantalla, tanto el menu abecedario como el submenu deberían acomodarse e ir haciéndose más cortos DENTRO DEL CONTENT, pues están incluídos en la división menus (100%). Pero lo que pasa es que se van para abajo colocándose por encima del footer!
Una vez que consiga entender por qué pasa esto creo que tendré solucionado todo el problema.
Gracias otra vez
Gorka

[Mikmoro]

Yo creo que la descompensación se produce porque el elemento que tienes con el abecedario, aunque tenga un tamaño en porcentaje no se puede reducir menos que su contenido. Si te fijas, aunque reduzcas la página él no cambia de tamaño vertical, y entonces ocupa más que su 15%, pero como el menú sigue ocupando su 85%, desaparece por debajo, aparece el scroll y el pie parece subir y montarse, cuando lo que ocurre es que la zona central si reduce correctamente.

Mikel.

[gorkreg]

¿Alguna solución a esto? ¿Se podrían dar a los font-size un tamaño en ems?