Foros del Web » Creando para Internet » CSS »

Problemas con div de altura 100%

Estas en el tema de Problemas con div de altura 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/02/2009, 09:25
 
Fecha de Ingreso: febrero-2009
Mensajes: 6
Antigüedad: 8 años, 9 meses
Puntos: 0
Problemas con div de altura 100%

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> 
  #2 (permalink)  
Antiguo 21/02/2009, 10:29
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con div de altura 100%

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 21/02/2009, 14:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 6
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Problemas con div de altura 100%

Perfecto, muchas gracias
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 09:30.