Foros del Web » Creando para Internet » CSS »

Div height 100% en container IE6

Estas en el tema de Div height 100% en container IE6 en el foro de CSS en Foros del Web. hola amigos, bueno este es un tema algo repetido ... pero no he podido dar con una solucion exacta a mi problema y espero me ...
  #1 (permalink)  
Antiguo 28/01/2011, 10:49
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 3 meses
Puntos: 9
Div height 100% en container IE6

hola amigos, bueno este es un tema algo repetido ... pero no he podido dar con una solucion exacta a mi problema y espero me puedan ayudar!

He visto los tutoriales sobre como obtener un div con una altura del 100% pero estos los aplican en el body... lo que yo deseo es aplicarlo dentro de un contenedor con un ancho fijo y sin altura establecida.

Aquí dejo el ejemplo que estoy intentando realizar:

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
<style type="text/css" media="screen">
* {
padding: 0;
margin: 0;
}

body { 
background: #333333;
}

* html #container {
height: 100%;
}

#container { width: 900px; position:relative; margin: 10px auto; background:#009933 }

#left {
margin:0;
padding:0;
width:200px; 
height:600px; 
color:#333; 
background:#eaeaea; 
border:1px solid #333;

} 

#right {
position:absolute;
right: 0;
top: 0;
padding:0; 
width:200px; 
height:100%; 
color:#333; 
background:#eaeaea; 
border:1px solid #333;
}

</style>
</head>

<body>
<div id="container">
	
	<div id="left">div con altura fija</div>
	
	<div id="right">mi div 100% height</div>
</div>
</body>
</html>
Según el tutorial el div 100% height hereda la altura del contenedor que tenga 100% height, pues esto me funciona bien en en IE7, IE8, Firefox, Chrome y Opera... pero no hereda la altura en IE6

Pues he probado con un :

Código:
html , body { 
height: 100%;
}
Pero en esta ocasión en IE6 el div se expande en toda la altura de la ventana de navegación, sobrepasando el contenedor....

Me gustaría saber si es posible arreglar algo en IE6 para que funcione... o usar javascript?... espero me puedan ayudar en esto, gracias!.
__________________
Quitenme la vida pero no la bebida.
  #2 (permalink)  
Antiguo 28/01/2011, 10:57
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 4 meses
Puntos: 9
Respuesta: Div height 100% en container IE6

Cita:
Pero en esta ocasión en IE6 el div se expande en toda la altura de la ventana de navegación, sobrepasando el contenedor....
Entonces quereis decir, que quieres que el div sea del mismo tamaño que el contenedor??
O como??... La verdad no te has explicado muy bien, una maqueta en PS o un preview, no vendria nada mal...
__________________
Diseñador y Desarrollador web :)
  #3 (permalink)  
Antiguo 28/01/2011, 15:01
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 3 meses
Puntos: 9
Respuesta: Div height 100% en container IE6

Si exacto, pero si te das cuenta hay una columna "left" izquierda que tiene un tamaño fijo dentro del contenedor, en éste caso 600px, en consecuencia el contenedor se expandió 600px abajo... entonces el otro div de 100% height deberá seguirlo.

Copia el código que he posteado al principio para que veas el resultado.
__________________
Quitenme la vida pero no la bebida.
  #4 (permalink)  
Antiguo 28/01/2011, 15:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Div height 100% en container IE6

?¿

Código CSS:
Ver original
  1. * html #container {
  2. height: 100&#37;;
  3. }

el doctype???

para que tu div right tome el 100% de altura el padre deve tener una altura definida ya sea en porcentaje o en px

prueba algo asi:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Ejemplo</title>
  5. <style type="text/css" media="screen">
  6. * {
  7. padding: 0;
  8. margin: 0;
  9. }
  10. html,body{margin:0;padding:0;height:100%;}
  11. body {
  12. background: #333333;
  13. }
  14. #container { width: 900px;height: 100%; position:relative; margin:auto; background:#009933 }
  15.  
  16. #left {
  17. margin:0;
  18. padding:0;
  19. width:200px;
  20. height:600px;
  21. color:#333;
  22. background:#eaeaea;
  23. border:1px solid #333;
  24.  
  25. }
  26.  
  27. #right {
  28. position:absolute;
  29. right: 0;
  30. top: 0;
  31. padding:0;
  32. width:200px;
  33. height:100%;
  34. color:#333;
  35. background:#eaeaea;
  36. }
  37.  
  38. </head>
  39.  
  40. <div id="container">
  41.    
  42.     <div id="left">div con altura fija</div>
  43.    
  44.     <div id="right">mi div 100% height</div>
  45. </div>
  46. </body>
  47. </html>

Ps: también prueba buscar en el foro o google sobre columnas equilibradas
  #5 (permalink)  
Antiguo 28/01/2011, 17:42
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 3 meses
Puntos: 9
Respuesta: Div height 100% en container IE6

Lamentablemente no es el resultado que deseaba, mi idea es que la columna con height 100% quede de igual tamaño que la altura de la otra columna izquierda... obviamente el resultado lo pueden ver en el ejemplo, pero no en IE6, probaré con otras opciones, gracias.
__________________
Quitenme la vida pero no la bebida.
  #6 (permalink)  
Antiguo 28/01/2011, 17:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Div height 100% en container IE6

te comente antes y lo repetiré creo que lo que tu buscas son columnas equilibradas busca en el foro o google

aqui te dejo un ejemplo del compañero mikmoro si es que no me falla la memoria

http://www.araudi.net/ejemplos/colum...ilibradas.html
  #7 (permalink)  
Antiguo 28/01/2011, 19:54
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 4 meses
Puntos: 9
Respuesta: Div height 100% en container IE6

a: #right quitale la position absolute.

a: #right y #left agregarles el float:left

a: #container, agregale height:100%

y veamos como te va
__________________
Diseñador y Desarrollador web :)

Etiquetas: container, height
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 12:38.