Foros del Web » Creando para Internet » CSS »

Height div 100% dentro de divs.

Estas en el tema de Height div 100% dentro de divs. en el foro de CSS en Foros del Web. Hola a todos, he estado buscando como solucionar el tema de la altura 100% dentro de otros divs, que he estado probando cosas que ponia ...
  #1 (permalink)  
Antiguo 23/02/2009, 12:25
Avatar de twisterska  
Fecha de Ingreso: agosto-2008
Mensajes: 51
Antigüedad: 9 años, 4 meses
Puntos: 0
Height div 100% dentro de divs.

Hola a todos, he estado buscando como solucionar el tema de la altura 100% dentro de otros divs, que he estado probando cosas que ponia por el foro, pero no me funciona nada.

En el div 3 no hay nada, sólo tiene un diseño, la altura mínima de la web será la del div 1 + 5, y se hará más larga dependiendo del contenido del div 4. Os pongo el código de lo que tengo, a ver si encontrais el fallo :S

Gracias.



#contenedor = 1+2+3+4
#izquierda = 1 + 3
#derecha = 2 + 4
#xafi_menu = 1
#sub_menu = 3
#superior = 2
#contenido = 4
#pie = 5

Código HTML:
<div id="contenedor">
	<div id="izquierda">
        <div id="xafi_menu"></div>
      <div id="sub_menu"></div>    
    </div>
    <div id="derecha">
        <div id="superior"></div>
        <div id="contenido"></div>
        </div>
</div>    
    <div id="pie"></div> 
Código HTML:
body{
	background-color:#000;
}
#contenedor {
	width: 857px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
}
#izquierda {
	width: 185px;
	float: left;
	position:relative;
}
#derecha {
	position:relative;
}
#xafi_menu {
	height: 756px;
	float: left;
	width: 185px;
}
#sub_menu {
	height: 100%;
	margin-top:756px;	
	width: 185px;
	float: left;
	position:absolute;

}
#superior {
	margin-left: 185px;
	height: 244px;
	width: 672px;
}
#contenido {
	margin-left: 185px;
	width: 672px;
	height:100%x;
	position:absolute;
}
#pie {
	height: 93px;
	width: 857px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
}

Última edición por twisterska; 23/02/2009 a las 12:35
  #2 (permalink)  
Antiguo 24/02/2009, 05:57
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Height div 100% dentro de divs.

esto lo podes simular agregandole fondos a los contenedores pero asi con position absolute; no va a funcionar nunca
o tambien con javascript podes ayudarlo
yo me quedo con los fondos
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 24/02/2009, 23:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 4
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Height div 100% dentro de divs.

Hola twisterska, yo me cance de estar diseñando para cada browser diferente... que si los hacks de la hoja de estilos, que si detectar el tamaño de la ventana, que si los DIV no tienen su altura acorde con el contenido... bla, bla, bla

Mejor usa alguno de los editores de sitios web en linea que aparecen aca... como parece que no puedo publicar links aun te lo dejo sobre entendido... tu agregale el htt...

blog.art-splash.info/2009/02/17/crea-tu-propio-sitio-web-con-herramientas-en-linea/

Espero te sirva de ayuda
  #4 (permalink)  
Antiguo 24/02/2009, 23:13
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Height div 100% dentro de divs.

mv55, mal chico, muy mal...

Y no te doy otra nomás!!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 25/02/2009, 04:28
 
Fecha de Ingreso: octubre-2007
Ubicación: Berlin
Mensajes: 51
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Height div 100% dentro de divs.

de esta forma crece tanto el div 3 como el 4 dependiendo lo que tenga.. lo demas tiene tamaño estatico.. no se si es lo que quieres..xD
Código HTML:
<div style="height:auto; width:800px;">
	<div style="width:200px; float:left; background-color:pink;">
		<div style="height:400px; background-color:black;"></div>
		<div style="height:auto; background-color:yellow;">
			asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
		</div>
	</div>
	<div style="width:600px; float:right; background-color:purple;">
		<div style="height:100px;">
		</div>
		<div style="height:auto;background-color:brown;">
			asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
			asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
			asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
			asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />	
				
		</div>
	</div>
	<div style="clear:both"></div>
	<div style=" width:800px; height:100px; background-color:red;">
	</div>
</div> 
funciona tanto en IE como FF

suerte :P
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 11:55.