Hola a todos,
Ya sé que este tema se ha tratado aquí, he hecho búsquedas pero no he podido solucionar los problemas, ya que la soluciones no se adaptan a mi caso.
El problema es que estoy empezando con CSS y he tenido el típico problema de querer asignar una altura de 100% en un DIV contenedor. He leído sobre lo de tener que asignar a los contenedores del DIV un 100% también de altura, pero en Firefox sigue sin funcionarme.
Os dejo el código a ver si vosotros sabéis cómo solucionarlo:
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base href="http://www.netrebels.com" />
<title>netRebels.com</title>
<style type="text/css">
html,body{height: 100%;}
body{
background-color:#000000;
margin: 0 0 0 0;
text-align: center;
}
#container{
width: 970px;
text-align: left;
margin: 0 auto 0 auto;
background-image:url(images/fondo.gif);
height: 100%;
}
div.logo{
width: 338px;
float: left;
height: 130px;
}
div.banner{
height: 130px;
float:right;
width: 632px;
background-image:url(images/logobanner.gif);
}
div.bannerin{
position: relative;
width: 468px;
height: 60px;
margin: -40px 0 0 -234;
top: 50%;
left: 50%;
}
div.ladoizq{
background-color: #CCCCCC;
float:left;
position: relative;
left: 42px;
width: 220px;
}
div.ladoder{
background-color: #CFCFCF;
position:relative;
right: 62;
width: 570;
float:right;
}
p{
margin: 0 0 0 0;
color: #000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container">
<div class="logo"><img src="images/logo.gif" border="0"></div>
<div class="banner"><div class="bannerin"><script type="text/javascript">google_ad_client = "pub-6786678304682322";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text";google_ad_channel = "";google_color_border = "242424";google_color_bg = "242424";google_color_link = "B3B3B3";google_color_text = "7F7F7F";google_color_url = "1B703A";</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div></div>
<div class="ladoizq"><p>General jojojo</p><p>General jojojo</p><p>General jojojo</p></div>
<div class="ladoder">
<p>HOLA ESTO ES UNA PRUEBA a la que me remito cantando i bailando y usando unos cuantos estilos a los que me remito cuando uso CSS, esto es realmente lo mejor que existe comparado con el HTML soez y vulgar. Viva yo y vivan los CSS.</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
<p>HOLA ESTO ES UNA PRUEBA</p>
</div>
</div>
</body>
</html>
Y aquí como se ve en un explorador y en el otro:
Iexplorer [correctamente]
http://img410.imageshack.us/img410/9...xplorermo4.jpg
Firefox [container cortado]
http://img137.imageshack.us/img137/80/firefoxtx8.jpg
En Firefox, se ve el 100% de la ventana, el problema es que cuando haces scroll para abajo este se queda en el 100% de la ventana y no de todo el documento... no se si me explico, podéis verlo en:
http://www.netrebels.com/index2.php
Saludos y gracias de antemano...
