Foros del Web » Creando para Internet » CSS »

Problema con div al 100% de altura.

Estas en el tema de Problema con div al 100% de altura. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/09/2004, 11:54
 
Fecha de Ingreso: mayo-2002
Mensajes: 72
Antigüedad: 15 años, 6 meses
Puntos: 0
Pregunta Problema con div al 100% de altura.

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 [email protected]!!

Última edición por Orkua; 13/09/2004 a las 11:56
  #2 (permalink)  
Antiguo 14/09/2004, 03:33
 
Fecha de Ingreso: mayo-2002
Mensajes: 72
Antigüedad: 15 años, 6 meses
Puntos: 0
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!!
  #3 (permalink)  
Antiguo 14/09/2004, 03:43
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 14/09/2004, 04:38
 
Fecha de Ingreso: mayo-2002
Mensajes: 72
Antigüedad: 15 años, 6 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 14/09/2004, 06:26
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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....
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #6 (permalink)  
Antiguo 14/09/2004, 13:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #7 (permalink)  
Antiguo 16/03/2011, 14:53
 
Fecha de Ingreso: marzo-2011
Mensajes: 1
Antigüedad: 6 años, 8 meses
Puntos: 0
De acuerdo Problema con div al 100% de altura.

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
  #8 (permalink)  
Antiguo 16/03/2011, 19:31
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Problema con div al 100% de altura.

Si queres que un div sea ajustable de alto, teenes que poner heigth: auto;
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:44.