Alto (height) 100% en firefox

tpzurdo · #1 (**permalink**) 26/02/2009, 11:44

Alguien puede ayudarme a entender como funciona el height=100% en firefox, porque en explorer, aunque me genero un espacio raro. lo interpreto bien y funciona pero en firefox no llega al fondo.

Igual puede que me equivoque en muchas cosas porque recien estoy empezando con css y me resulta mucho más entendible con las tablas.

Gracias

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
	margin: auto;
	padding: 0px;
	text-align: center;
}

.texto {
	font-weight: bold;
	color: #666666;
	background-color: #FFFFFF;
	width: 70%;
	height:80%;
	float:right;
	padding-top: 25px;
}
.dibujo {
	background-color: #993333;
	float: left;
	width: 30%;
	height:80%;
	padding-top: 25px;
}
.tope {
	height:100%;
	width: 90%;
	text-align: center;
	margin: auto;
}
.logotipo {
	margin:auto;
	color: #FFFFFF;
	background-color: #000066;
	float: left;
	margin: auto;
	height:10%;
}
.bottom {
	margin:auto
	text-align: center;
	background-color: #999999;
	height=10%;

}
.botones {
	width= 100%;
	margin:auto;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #9900FF;
	height:10%;
}
.centrado {
	background-color: #00FF33;
	width: 80%;
	height:100%;
	margin: 0 auto;
	text-align: center;
	padding:0px;
}
.corte { clear: both;}
-->
</style>
</head>
<body>
<div class="centrado">
	<div class="tope">
		<div class="logotipo">LOGOTIPO</div>
		<div class="botones">HOME QUIENESSOMOS DESCARGAS CONTACTO SARASA</div>
		<div class="dibujo">ACA VA ILUSTRACION</div>
		<div class="texto">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
		<div class="bottom">fdgdfhdfhfgdfgdfg</div>
	</div>
</div>
</body>
</html>

tpzurdo · #2 (**permalink**) 26/02/2009, 11:49

Aqui como se ve

stratosdpe.com. ar/clientes/teo/explorer.jpg

stratosdpe.com. ar/clientes/teo/firefox.jpg

baccxus · #3 (**permalink**) 26/02/2009, 13:15

Hola tp zurdo,

Veo que maquetas como si estuvieras usando tablas, anidas una división dentro de otra división para que te de un margen, en css tenemos "padding", que bien sirve para lo que buscas, aquí te pongo un breve cambio que le hice a tu css y a tu html, además para que la barra lateral siga hacia abajo se usa una imagen de fondo que crea ese efecto; no tienes porque ser dueño de todo el layout, solo tienes que decirle como comportarse.

Por cierto, también tienes que usar un DOCTYPE que te valide el documento.

Saludos

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
	margin: 0;
	padding: 0px;
}
#container {
	background-color: #00FF33;
	width: 800px;
	margin: 0 auto;
	padding:0 10px;
	position: relative;
}

#encabezado {
	font-weight: bold;
	height: 150px;
	color: #FFFFFF;
	background-color: #9900FF;
	position: relative;
	padding: 5px;
}
#contenido {
	font-weight: bold;
	color: #666666;
	background-color: #FFFFFF;
	width: 66%;
	margin-left: 30%;
	text-align: justify;
	padding: 2%;
}
#lateral {
	background-color: #993333;
	float: left;
	width: 30%;
}
#pie {
	padding: 1.5%;
	height: 50px;
	background-color: #999999;

}
.logotipo {
	margin:auto;
	color: #FFFFFF;
	background-color: #000066;
	float: left;
}

#encabezado ul {
margin: 0;
margin-left: 26%;
position: absolute;
bottom: 5px;
}

#encabezado li {
 display: inline;
}

#encabezado li a {
margin: 2.5px;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="encabezado">
    <div class="logotipo">LOGOTIPO</div>
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">QUIENES SOMOS</a></li>
            <li><a href="#">DESCARGAS</a></li>
            <li><a href="#">CONTACTO</a></li>
            <li><a href="#">SARASA</a></li>
          </ul>
        </div>
		<div id="lateral">ACA VA ILUSTRACION</div>
		<div id="contenido">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
		<div id="pie">fdgdfhdfhfgdfgdfg</div>
</div>
</body>
</html>

tpzurdo · #4 (**permalink**) 26/02/2009, 13:31

Uhh que grande me voy a poner a estudiarlo. Eso por no hacer el taller de CSS en la facultad cuando pude tengo entablada la cabeza.

GRACIAS ENORMES

tpzurdo · #5 (**permalink**) 26/02/2009, 13:43

De todas maneras no te permite utilizar todo el height, lo que en el diseño sería un problemon para lo que estoy desarrollando. Mi objetivo al sacar el doctype es tratar de lograr eso, utilizar el 100% del height que es de lo que se trata. Gracias de todas maneras porque veo ahora varias cosas de como trabajar usando ids.

Fijate que no funciona bien en iexplorer 6 al menos. Aunque esta bueno el diagrama voy a ver si lo puedo usar.

Muchas gracias