Hola todos:
Orkua : hice algunas pruebas, por eso llego un poco tarde con la respuesta.
Me base en tu codigo original, y en
IE5 no tuve problemas; pero si existe un detalle en los tiempos de "rendereo".
Veamos; hay en tu código un
DIV "contenido" que supongo estará de más. Si "menu" toma el 100% de "contenedor", al agregarle "contenido" su altura va a cambiar, pero "menu" no lo va a seguir más que una vez. Como la
Flecha de Zenón, si "menu" actualizara nuevamente su altura empujaría a "contenido", lo que cambiaría nuevamente la altura de "contenedor", y así hasta que el navegador no soporte el largo del documento. (En el caso de la
Flecha, la distancia sí se reduce infinitamente; pero los navegadores no soportan un largo infinito de documento.)
Por otro lado, el CSS funciona. Aquí te lo paso en limpio con un "contenido" entre etiquetas de ocultamiento para que las quites y veas la diferencia.
Código:
<style>
#contenedor{
height:300px; border:2px solid red; col or:red
}
#menu{
height:100%; border:2px solid green;
}
</style>
<div id="contenedor">
<div id="menu">QWERTYUIOP</div>
<!--
<div id="contenido">QWERTYUIOP<br>QWERTYUIOP</div>
-->
</div>
Segun tu ultimo ejemplo, el otro menu de opciones no esta debajo sino al lado. Y alli esta el problema del "rendereo".
El primer
DIV toma la altura del contenedor y se muestra, pero el segundo
DIV lo estira aun mas porque es mas alto. Como el primero ya tiene la altura asignada, no cambia.
Si quieres usar CSS te sugiero que "escribas" primero el DIV mas alto y despues le des la ubicacion final con algun estilo.
O usa un escript al final de la carga del documento.
saludos
furoya