Foros del Web » Creando para Internet » CSS »

Altura del contenedor 100% del contenido

Estas en el tema de Altura del contenedor 100% del contenido en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/10/2006, 07:39
 
Fecha de Ingreso: octubre-2006
Mensajes: 2
Antigüedad: 11 años, 1 mes
Puntos: 0
Altura del contenedor 100% del contenido

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>
  #2 (permalink)  
Antiguo 23/10/2006, 09:14
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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>>
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 23/10/2006, 10:14
 
Fecha de Ingreso: octubre-2006
Mensajes: 2
Antigüedad: 11 años, 1 mes
Puntos: 0
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.
  #4 (permalink)  
Antiguo 23/10/2006, 10:31
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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 ?
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
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 19:28.