Div contenedor con altura 100% firefox

canmc · #1 (**permalink**) 06/09/2006, 05:47

Buenas a todos!

Estoy liado con el diseño de una página y ofrezco un jamón a quien me resuelva esta dudad

. La página que estoy diseñando tiene un div contenedor con un color de fondo y un borde lateral. La altura de este div tiene que ser siempre el 100%, pero el problema es que en firefox el 100% es sólo el área que visualizas en pantalla, es decir, que si desciendes con el scroll vertical ves que el contenedor desaparece

.

Pego el código:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Altura de div</title>
<style type="text/css">

body, html {
	height:100%;
	margin:0;
	padding:0;
}
#contenedor {
	width:600px;
	height:100%;
	background:#9CC;
	margin:0 auto;
	border-right:1px #333 solid;
	border-left:1px #333 solid;
}
#contenido {
	width:300px;
	background:#069;
	float:left;
	margin: 10px 0 0 10px;
	color:#FFF;
}
</style>
</head>
<body>
<div id="contenedor">
  <div id="contenido">
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
  </div>
</div>
</body>
</html>

Ya sé que es algo muy común y que se puede solucionar estableciendo una altura mínima, pero el problema es que en la página que estoy diseñando tendría que crear un contenedor por cada página ya que la altura del contenido no es siempre la misma. Si tengo que hacerlo no pasa nada, pero quería preguntar si a alguien se le ocurre alguna forma de hacerlo sin utilizar un div contendor por página. Ainss que jaleo de navegadores

.

Gracias por anticipado y un saludo a todos!!!

#2 (**permalink**) 06/09/2006, 10:02

Cita:

pero el problema es que en firefox el 100% es sólo el área que visualizas en pantalla, es decir, que si desciendes con el scroll vertical ves que el contenedor desaparece

En Firefox, Opera, Konqueror, y en cualquiera que respete la especificación CSS.

Por otro lado, ¿por qué simplemente no dejás que sea de la altura de su contenido?
Si es porque necesitás que al menos ocupe el tamaño de la pantalla, se me ocurre que podrías hacer esto: Poner 2 divs, uno con altura 100% y otro que contenga el texto, ambos con el mismo fondo y el mismo borde.
Si el texto es menos que la altura de la pantalla, el div con altura 100% completa el resto. Y si el texto es mayor, el fondo va hasta donde sea necesario.

Saludos.

rumo · #3 (**permalink**) 06/09/2006, 10:43

perdon, pero me voy a aprovechar del tema, ya que mi duda es similar

tengo un div (#contenedor) y dentro tengo 3 divs alineados
el primero y el tercero son bordes y el medio es contenido
la cosa es que logre que el #contenedor me ocupe de principio a fin pero los bordes y el contenido solo llegan hasta donde se ve la pantalla si bajo con el scrollbar, ya no se ven los bordes, alguien sabe como solucionarlo????

Código HTML:

<html>
<head>
<style type="text/css">	
html{
  height:100%;
  ...
}
body{
  height:100%;
  ...
}
#contenedor{
  height:100%;
  font-size:12px;
  ...
}
#borde_i{
  background:url(imagen);
  width:15px;
  backgroun-repeat:repeat-y;
  height:100%;
  float:left;
}
#borde_d{
  background:url(imagen2);
  width:15px;
  backgroun-repeat:repeat-y;
  height:100%;
  float:left;
}
#contenido{
  height:100%;
  float:left;
  width:850px;
}
</style>
</head>
<body>
<div id="contenedor">
  <div id="borde_i"></div>
  <div id="contenido">contenido, ocupa mas que el alto de la ventana</div>
  <div id="borde_d"></div>
</div>
</body>
</html>

si alguien sabe algo que me ayude plis

salu2

canmc · #4 (**permalink**) 06/09/2006, 12:42

Buenas de nuevo
alvlin, lo que tu me comentas de poner dos div, uno contenedor y otro para contenido no me vale. En el ejemplo que yo te comento sólo he puesto un div de contenido, pero en la página que estoy haciendo hay varios div y el tamaño varía. De todas formas, para no liarnos, con el código que yo he puesto cómo lo harías?

Es que ya digo que el problema que se me plantea en el diseño de la página que estoy haciendo es que cada página va a tener una altura mínima y me veo creando un div contenedor para cada una una con un min-height diferente

. Este tema me tiene loco... la próxima vez prometo no hacer un diseño rodeado por un borde

Muchas gracias de todas formas!!!