Foros del Web » Creando para Internet » CSS »

Altura 100% en div contenedor - CSS

Estas en el tema de Altura 100% en div contenedor - CSS en el foro de CSS en Foros del Web. Hola, busque algo que me pueda ayudar y no encontre nada , alguien sabe como solucionar para firefox el alto al 100% de un div ...
  #1 (permalink)  
Antiguo 09/04/2008, 15:49
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 15 años
Puntos: 0
Altura 100% en div contenedor - CSS

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;
}
__________________
www.elumina.com.ar
  #2 (permalink)  
Antiguo 09/04/2008, 17:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura 100% en div contenedor - CSS

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.
  #3 (permalink)  
Antiguo 10/04/2008, 08:38
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 15 años
Puntos: 0
Re: Altura 100% en div contenedor - CSS

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
__________________
www.elumina.com.ar
  #4 (permalink)  
Antiguo 10/04/2008, 10:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura 100% en div contenedor - CSS



¿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.
  #5 (permalink)  
Antiguo 10/04/2008, 10:46
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 15 años
Puntos: 0
Re: Altura 100% en div contenedor - CSS

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;
}
__________________
www.elumina.com.ar
  #6 (permalink)  
Antiguo 10/04/2008, 10:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura 100% en div contenedor - CSS

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