Altura del contenedor 100% del contenido

senseye · #1 (**permalink**) 23/10/2006, 06:39

Saludos, y cervecitas frescas para todos

Es mi primer mensaje y ya entro preguntando... pero es que todavía estoy demasiado "verde" para responder en los otros hilos. Es lo que tiene la ignorancia: mejor callado que meter la gamba.

Estoy peleándome con las cascadas y de momento ganan ellas por goleada

. El tema está en que intento que un <div> contenedor tenga una altura del 100% y que aumente su altura a medida que otros <div> que están en su interior aumentan su contenido, de forma que quede como fondo blanco. Seguro que el tema será recurrente, pero llevo bastantes horas utilizando el buscador pero no doy con la solución (igual es que para las CSS soy un poco... digamos "obtuso", no sé...).
La idea es que los <div> "menuizquierdo" y "menuderecho" irán aumentando de tamaño y su parte baja tiene que encajar siempre con el fondo de la ventana, pero el "contenedor" no crece (y ellos tampoco encajan). En el <div> "textocentral" he copiado repetidas veces un párrafo para que se vea el problema que me encuentro ahora.

A ver si alguien puede hecharme un cable

.

Gracias

Código:

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
		<title>prueba1</title>
		<style type="text/css" media="screen">
		
<!--body        { color: #000; background-color: #666 }

#contenedor { background-color: #fff; margin-left: -430px; position: absolute; top: 0; left: 50%; width: 862px; height: 100%; min-height: 100%; border-right: 1px solid #666; border-left: 1px solid #666 }

#cabecera    { background-color: #f66; position: absolute; top: 0; left: 0; width: 862px; height: 90px }

#menuizquierdo   { background-color: #fc0; position: absolute; top: 90px; left: 690px; width: 170px; height: 100% }

#menuderecho       { background-color: #cf9; position: absolute; top: 250px; left: 0; width: 150px; height: 100% }

#textocentral      { background-color: #9cf; position: absolute; top: 160px; left: 180px; width: 490px }--></style>
	
	</head>

	<body bgcolor="#ffffff">
	<div id="contenedor">
	<div id="cabecera"></div>
	<div id="menuizquierdo"></div>
	<div id="menuderecho"></div>
	<div id="textocentral">
	<p>Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain
	</p></div>
	</div>
	</body>

</html>

fearlex · #2 (**permalink**) 23/10/2006, 08:14

1 - Evita usar posicionamiento absoluto, baja puntos en accesibilidad ademas de que te estropea todo el layout si no sabes usarlo.

2 - Como tip, siempre ponle el ultimo punto y coma a los codigos, asi si tienes que agregar algo no te pierdes por que no te acuerdas que te falta el punto y coma.

entre otras cositas que tienes que arreglar, modifique el css completo, tenias mucho codigo innecesario, por ejemplo, no es necesario usar top y left en todos los selectores, mejor usa float para posicionar. Checka el codigo y dejanos saber en que parte tienes duda.

Cita:

<!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>prueba1</title>
<style type="text/css" media="screen">

body { color: #000;
background-color: #666;
margin: 0;
padding: 0;
}

#contenedor {
background-color: #fff;
position: relative;
width: 760px;
height: 100%;
min-height: 100%;
border-right: 1px solid #666;
border-left: 1px solid #666;
}

#cabecera {
background-color: #f66;
float: left;
width: 760px;
height: 90px;
}

#menuizquierdo {
background-color: #fc0;
float: left;
width: 170px;
}

#menuderecho {
background-color: #cf9;
float: right;
width: 150px;
}

#textocentral {
background-color: #9cf;
float: left;
width: 440px;
}
</style>

</head>

<body >
<div id="contenedor">
<div id="cabecera"></div>
<div id="menuizquierdo"></div>
<div id="menuderecho"></div>
<div id="textocentral">
<p>Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain Twenty years from now you will be more disappointed by the things that you didn t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover. - Mark Twain
</p></div>
</div>
</body>

</html>>

senseye · #3 (**permalink**) 23/10/2006, 09:14

Hola Fearlex,

Primeramente y ante todo, gracias por tu tiempo.

El código que me cuelgas me coloca los elementos pegados a la parte derecha del layout. La intención es que al final quede como la ventana de este foro, es decir, el div "contenido" centrado en la parte central de la ventana (igual que haciamos una tabla centrada con una anchura de 800px y una altura de 100% con tres columnas, las dos laterales para los navegadores y la central para el texto central) dando un color blanco de fondo a todo su contenido, que su altura venga determinada por la altura de "textocentral" o de "menuizquierdo" o de "menuderecho".

Acabo de ver también otro "strange behavior": si a "contenido" le pongo la propiedad "background-color: #fff; height: 100%;" ocurre que rellena de blanco solo el 100% de la ventana visible en el momento de cargar la página, pero si bajo el scroll sin redimensionar (ya que sigue teniendo información), aparece en el color de fondo.

P.D. Estoy para hacerme el hara-kiri con esto de las CSS.

fearlex · #4 (**permalink**) 23/10/2006, 09:31

Sigo sin saber a que te refieres con eso "strange behavior", no encuentro donde esta el contenido extraño. Simplemente le pusistes al background del contenedor blanco y este esta determinado por el tamaño del texto central. Para centrar el layout al centro colocale la propiedad: text-align: center; en la etiqueta body del codigo que te puse.

Eso lo centra al medio, vamos por pasos, que mas necesitas ?