Altura 100% en div contenedor - CSS

guilledocke · #1 (**permalink**) 09/04/2008, 14:49

Hola, busque algo que me pueda ayudar y no encontre nada

, alguien sabe como solucionar para firefox el alto al 100% de un div contenedor??

les dejo el codigo

Código:

</head>

<body>

<div id="contenedor">
<div class="clear"></div>
	<div id="interior">
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	</div>
<div class="clear"></div>
</div>

</body>
</html>

CSS

Código:

body {
	margin: 0px;
	text-align: center;
	height: 100%;
}

#contenedor {
	width: 700px;
	background-color: #CCCCCC;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}

#interior {
	width: 500px;
	height: 500px;
	margin-left: 100px;
	float: left;
}

Mikmoro · #2 (**permalink**) 09/04/2008, 16:38

Puedes añadir a tu selector esto:

#contenedor {
width: 700px;
background-color: #CCCCCC;
margin-left: auto;
margin-right: auto;
height: auto;
min-height: 100%;
}

Mikel.

guilledocke · #3 (**permalink**) 10/04/2008, 07:38

Gracias Mikmoro por tu respuesta pero no me funciono tampoco, al parecer es algo complicado de resolver, no pude encontrar en ningun lado algo que funcione, si llego a dar con la respuesta la publicare

gracias

Mikmoro · #4 (**permalink**) 10/04/2008, 09:24

¿No te ha funcionado?

http://www.araudi.net/guille.html

¿Seguro que preguntabas por cómo poner el 100% de alto para firefox?

Este código hace eso que te digo, te lo garantizo:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Cien por cien de alto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0px;
text-align: center;
height: 100%;
}

#contenedor {
width: 700px;
background-color: #CCCCCC;
margin-left: auto;
margin-right: auto;
height: auto;
min-height: 100%;
}

#interior {
width: 500px;
height: 500px;
margin-left: 100px;
float: left;
} </style>
</head>
<body>
<div id="contenedor">
<div class="clear"></div>
<div id="interior">
Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
</div>
<div class="clear"></div>
</div></body>
</html>

que es tú código con el añadido que te dije.

Cita:

alguien sabe como solucionar para firefox el alto al 100% de un div

Quizá preguntabas por otra cosa, y no he entendido qué querías decir con "solucionar para Firefox".

Mikel.

guilledocke · #5 (**permalink**) 10/04/2008, 09:46

Tenes razón, quizas me exprese mal, lo que queria es un div contenedor que ocupe todo el alto de la pagina sin importar su contenido, si probas el codigo que me pasas con un contenido mayor el fondo se corta,

encontre esto otro, la unica contra que tiene es que me genera scroll en el div contenedor cuando el contenido es mayor al alto de la pag.

asi que por el momento tendre que utilizar dos contenedores, uno para poco contenido y otro para mas contenido

gracias!

html

Código:

<!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>arg::::::::::::::::::::::::</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="contenedor">
	<div id="interior">
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	Don't set the height of a div to 100% unless it's container element has a specific height set. 100% of auto = auto. If Microsoft value CSS compliance then IE7 will likely fix the bug in IE6 that makes it respond to height=100% because it is wrong according to the CSS specification. So don't waste any more time thinking about "how can I get this trick to work in other browsers?".
	</div>
</div>

</body>
</html>

CSS

Código:

body, html {
	margin: 0px;
	text-align: center;
	height: 100%;
}

#contenedor {
	width: 700px;
	background-color: #CCCCCC;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	overflow: auto;
}

#interior {
	width: 500px;
	margin-left: 100px;
	float: left;
}

Mikmoro · #6 (**permalink**) 10/04/2008, 09:52

De acuerdo, eso es más concreto.

Pero el problema no está ahí, sino que al div "interior", que es donde pones el texto, le estás pidiendo que mida 500px de alto, de manera que aunque el texto crezca él no crece, y por eso no hace crecer al contenedor principal.

Prueba a quitar el alto de 500px a ese div y el fondo gris irá hasta abajo, mida lo que mida la página.

Mikel.