Foros del Web » Creando para Internet » CSS »

Alto (height) 100% en firefox

Estas en el tema de Alto (height) 100% en firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/02/2009, 11:44
Avatar de tpzurdo  
Fecha de Ingreso: julio-2007
Mensajes: 83
Antigüedad: 10 años, 4 meses
Puntos: 0
Alto (height) 100% en firefox

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> 
  #2 (permalink)  
Antiguo 26/02/2009, 11:49
Avatar de tpzurdo  
Fecha de Ingreso: julio-2007
Mensajes: 83
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Alto (height) 100% en firefox

Aqui como se ve

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

stratosdpe.com. ar/clientes/teo/firefox.jpg
  #3 (permalink)  
Antiguo 26/02/2009, 13:15
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Alto (height) 100% en firefox

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> 
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 26/02/2009 a las 13:21
  #4 (permalink)  
Antiguo 26/02/2009, 13:31
Avatar de tpzurdo  
Fecha de Ingreso: julio-2007
Mensajes: 83
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Alto (height) 100% en firefox

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
  #5 (permalink)  
Antiguo 26/02/2009, 13:43
Avatar de tpzurdo  
Fecha de Ingreso: julio-2007
Mensajes: 83
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Alto (height) 100% en firefox

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
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:13.