Problema con div al 100% de altura.

[Orkua]

Hola,
Tengo un div(menu) que contiene el menu de una web y quiero que este se adapte a la altura del div(contenedor).
He puesto una regla css asi:

Código:

div#menu{
height:100%;
}

pero parece no hacer caso. Alguien sabe decirme si puede depender de los otros divs que hacen de contenedor al div(menu), o que puede estar afectando para que no tome el 100% de la altura?
la estructura de mi html es más o menos así:

Código:

<div id="contendor">
     <div id="menu"></div>
     <div id="contenido"></div>
</div>

Gracias a tod@s!!

[Orkua]

al contenedor :

Código:

div#contenedor{
	width: 666px;
	background-color: #fff;
	margin: 50px auto 30px auto;
	border: 10px solid #fff;
}

si con esto no lo ves muy logico te posteo todo el css en una url y la pagina html....ok?

Muchas gràcias!!

[kemie]

El problema es que si solo especificas height:100% en un elemento, el navegador no sabe 100% de que? Intenta asignar al body y al contenedor una altura del 100% tambien.

[Orkua]

tienes razón, pero ya lo habia probado y tampoco funciona....

Podeis ver el codigo html/css aqui: a ver si sabeis porqué sucede:

http://personales.ya.com/obiwan/

He puesto la div esquerra(verde) al 100% con lo que entiendo que deberia adaptarse a la div contenidor(roja) que es la que la contiene. Así, la div menu(con rayas de fondo), deberia adapatarse al 100% de la div contenidor(roja), no?

A ver si me podeis echar una mano.
Gracias

[kemie]

encontre una mejor explicacion:
http://www.quirksmode.org/css/100percheight.htm
aparentemente el 100% solo se puede aplicar al 100% de la pagina, o cuando el contenedor tiene una medida exacta. Tu solucion seria darle ina altura a contenidor, o hacer que todo quede al alto de la ventana....

[furoya]

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

[mRCOyo]

Yo tengo un problemas por que la solucion qe dan aqi es con un contenedor con dimenciones fijas, pero yo tengo un contenedor con dimenciones automaticas q es necesario para q la div se adapte al texto, y necesito mantener una div siempre en la parte de abajo pero como la div contenida tambien es automatica siempre se qeda arriba por qe su contenido es insuficiente, como ahi que se puede hacer

[ContactarNET]

Si queres que un div sea ajustable de alto, teenes que poner heigth: auto;