Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   100% Height (altura) en un DIV -Firefox help- (http://www.forosdelweb.com/f53/100-height-altura-div-firefox-help-469695/)

Tebb 02/03/2007 17:04
100% Height (altura) en un DIV -Firefox help-
 
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... :corazon:

Mikmoro 02/03/2007 17:48
Re: 100% Height (altura) en un DIV -Firefox help-
 
Hola, tebb.
Efectivamente, como dices este tema se ha visto muchas veces en el foro y se han aplicado diversas soluciones, pero lo difícil suele ser encontrar el término a buscar para dar con ellas.

En tu caso, la solución sería esta:

Añade una clase a la parte del css como esta:

.corte { clear: both;}

Y ahora añade al html un div con esa clase, al final del documento, justo antes de cerrar el último div:

</div>
<div class="corte"></div>
</div>
</body>
</html>

Creo que con esto bastará.

Mikel.

Tebb 02/03/2007 17:56
Re: 100% Height (altura) en un DIV -Firefox help-
 
Hola Mikimoro, muchas gracias por la ayuda, pero no ha solucionado el problema:

http://www.netrebels.com/index3.php

No sé si es que lo he hecho mal (no creo) o es que falla otra parte del código, pero en Firefox sigue viéndose mal... :borracho:

La verdad es que ya no sé que hacer ni probar para solucionarlo...

Mikmoro 02/03/2007 18:01
Re: 100% Height (altura) en un DIV -Firefox help-
 
Oh, perdona: se me ha olvidado decirte que quitaras el height: 100%; del selector #container.
Lo siento. Prueba ahora.

Mikel.

Tebb 02/03/2007 18:04
Re: 100% Height (altura) en un DIV -Firefox help-
 
Woah, ¡perfecto!

¡Por fin veo la luz! jeje, muchísimas gracias, en serio ;)

Por cierto, ¿alguna breve explicación de porque pasa esto y en que consiste esa solución?

¡Gracias otra vez, me has alegrado el día! :)

Mikmoro 02/03/2007 18:21
Re: 100% Height (altura) en un DIV -Firefox help-
 
Pasa porque en css una caja no debe crecer si crecen otras cajas que lleve dentro flotadas (IE lo interpreta mal y siempre crece, lo que suele producir otros problemas).
Entonces para que crezca, hay que producir un corte, un salto de línea, lo que obliga a que el espacio "virtual" que ocupan las cajas flotadas se convierta en espacio "físico", y entonces la caja contenedora sí crece para albergar a las que tiene dentro.

El último error se debía a que, aunque fuerces ese corte, si dices que la caja mide el 100%, mide el 100% y punto, y el corte no puede cambiar eso (no así en IE, que hace lo que le da la gana y crece siempre).

Me alegro de haberte ahorrado tiempo y quebraderos de cabeza :-D

Mikel.

frijolerou 02/03/2007 19:53
Re: 100% Height (altura) en un DIV -Firefox help-
 
Complementando la explicación de Mikmoro, cabe señalar que en los navegadores que respetan la espicificación de las CSS, la propiedad height mantiene fija la altura que se haya definido, y no crecerá más independiente de la cantidad de contenido que coloques dentro. Esto a diferencia de min-height que te permite definir una altura mínima inicial, pero que crecerá a medida que lo requiera su contenido.

Hasta la versión 6 de IE esto no ocurría, donde no había soporte para min-height, siendo height la propiedad que emulaba sus características.


La zona horaria es GMT -6. Ahora son las 06:52.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.