Height div 100% dentro de divs.

[twisterska]

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;
}

[emiliodeg]

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

[mv55]

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

[Dalvenjha]

mv55, mal chico, muy mal...

Y no te doy otra nomás!!!

[dark_nexus]

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