Problemas con div de altura 100%

Iosuiscloud · #1 (**permalink**) 21/02/2009, 09:25

Resulta que estoy con un diseño, y cada vez que el contenido del div izquierdo es superior al del menú derecho, el menú derecho se queda cortado, no llega hasta el fondo de la página, que es lo que quiero, el código que empleo es este:

Con el texto este, se puede ver claramente cual es el problema. Lo siento si el problema está repetido, pero no he encontrado solución en el foro leyendo :(

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webnavente</title>
<style type="text/css">
<!--
body {
	margin:0px;
	background-color:#FFFF99;
}
img {
	border:none;
}
.hide{
    display: none;
}
.show{
    display: block;
}
#contenedor {
	position:relative;
	width:950px;
	z-index:1;
	left:50%;
	margin-left:-475px;
	top:10px;
}
#contenido {
	position:relative;
	width:950px;
	z-index:2;
	left: 0px;
	top: 0px;
	background-color: #003366;
	overflow:auto;
}
#menu {
	position:relative;
	width:200px;
	z-index:3;
	left: 0px;
	top: 0px;
	background-color: #0066FF;
	float:right;
}
#cabecera {
	position:relative;
	width:950px;
	height:130px;
	z-index:4;
	left: 0px;
	top: 0px;
	background-color: #0033CC;
}
#pie {
	position:relative;
	width:950px;
	height:70px;
	z-index:5;
	top: 0px;
	left: 0px;
	background-color: #000066;
}
#espaciador_pie {
	position:relative;
	width:950px;
	height:80px;
	z-index:6;
	top: 0px;
	left: 0px;
}
#datos {
	position:relative;
	width:750px;
	z-index:1;
	left: 0px;
	top: 0px;
	float:left;
}
#separador_acerca {
	position:relative;
	width:200px;
	height:15px;
	z-index:3;
}
#subseparador_acerca {
	position:relative;
	width:200px;
	height:10px;
	z-index:4;
}
#acerca {
	position:relative;
	width:180px;
	height:20px;
	z-index:1;
	left: 10px;
	background-color: #3366CC;
}
#contenido_acerca {
	position:relative;
	width:175px;
	height:200px;
	z-index:2;
	left: 15px;
	background-color: #3366FF;
}
#separador_menu_inferior {
	position:relative;
	width:200px;
	height:15px;
	z-index:3;
}
-->
</style>
</head>
<body>
<div id="contenedor">
	<div id="cabecera"></div>
	<div id="contenido">
	<div id="datos">
	    <p>Lorem ipsum adhuc nihil legere id usu, ne sint constituam interpretaris mel, epicuri detracto senserit no vim. Ferri malorum virtute his ne, ad nonumy detracto persequeris pri. Urbanitas scriptorem est in, ea vis natum diceret constituto. Per ad volutpat evertitur neglegentur, cu dolor sententiae usu, has rationibus dissentias id. Cum erat possit apeirian cu, minim explicari at duo. No pro iudico blandit tincidunt, ex ceteros deterruisset has, suas laoreet constituam mel ne.</p>
	    <p> Has virtute suavitate te, rebum assum dolores eu mel. No vix denique moderatius, vis eruditi mnesarchum contentiones id. Mazim recusabo forensibus est ei, id sit iuvaret deterruisset. Cum sint iudico maiestatis ex. No sit persius civibus perfecto, in mel inani dicant. Et nonumy sadipscing vel, qui quaeque aliquam posidonium ne, erat dicat laboramus cu eam.</p>
	    <p> Te alienum adipisci mea, duo no tation admodum, quo no modus erant verterem. Civibus voluptatibus pro te, eam sumo esse mucius an, atqui mucius putant vim eu. Laoreet detraxit salutandi eam ei, delenit maiestatis qui id, pro ei praesent electram adipiscing. Mea ex diceret fastidii reprimique, his odio quodsi quaeque te, suas bonorum accommodare ei eum. An iudico gubergren est, vix no tollit nemore posidonium.</p>
	    <p> Tation maiestatis deterruisset quo id, autem mentitum referrentur in his, nam nisl malis melius an. Assentior argumentum at usu, vim ea quaestio rationibus necessitatibus. At vim facer aperiri, fugit vidisse aliquyam ad mel. No audiam aliquyam aliquando cum, eum at idque etiam consetetur, ne pro vitae consequat dissentias. Vis inani vituperata eu, ut per phaedrum antiopam. Eos an graeco delenit alienum, nam an elit numquam salutandi.</p>
      </div>
	<div id="menu">
	  <div id="separador_acerca"></div>
	  <div id="acerca">►Acerca de... </div>
	  <div id="subseparador_acerca"></div>
	  <div id="contenido_acerca">Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n<br />
	  Informaci&oacute;n</div>
	  <div id="separador_menu_inferior"></div></div>
	</div>
	<div id="espaciador_pie">
	<div id="pie"></div>
	</div>
</div>
</body>
</html>

jomaruro · #2 (**permalink**) 21/02/2009, 10:29

Hola:

Date una vuelta por esta página, en concreto por la "solución conjunta: pie abajo con columnas equilibradas".

Saludos.

Iosuiscloud · #3 (**permalink**) 21/02/2009, 14:13

Perfecto, muchas gracias