Foros del Web - Ver Mensaje Individual - Tamaño vertical relativo y overflow en div

chichote · #6 (**permalink**) 29/11/2012, 13:54

Asi como lo planteas no se puede. Ya que necesitas hacer al menos una operacion matematica, y en css no se puede, seria ideal height:100%-50px, pero de momento aun no se puede directo en css.

Pero con javascript se puede, aca tienes un ejemplo con jquery

Código:

<!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>
	<title>templates</title>
	<style>
		html, body{
			height:100%;
			min-height:100%;
			margin:0;
			padding:0;
			color:#FFFFFF;
		}
		#contenedor{
			position: relative;
			float:left;
			width:600px;
			height:100%;
			min-height:100%;
			background:blue;
		}
		#arriba{
			position:relative;
			float:left;
			width:100%;
			height:100px;
			background:red;
			z-index: 2;
		}
		#abajo{
			position:relative;
			width:100%;
			background:black;
			z-index: 1;
			overflow:auto;
			max-height:100%;
		}
		</style>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
		<script>
			$(window).load(function(){
				var Contenedor = parseInt($("#contenedor").height());
				var Arriba = parseInt($("#arriba").height());
				$("#abajo").height((Contenedor-Arriba)+"px");
			});
		</script>
	</head>
	
	<body>
		<div id="contenedor">
			<div id="arriba">Arriba</div>
			<div id="abajo">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna tellus, sagittis et luctus id, sollicitudin vel mauris. Nulla facilisi. Integer ultrices ligula quis urna fermentum vulputate. Praesent laoreet ultrices est id molestie. Sed augue dui, fermentum in hendrerit vel, ullamcorper a sem. Vestibulum sed luctus odio. Fusce non erat vel mauris faucibus dignissim at porta nunc. Vestibulum eget ligula quis elit condimentum viverra. Phasellus hendrerit ultrices placerat.</p>
				<p>Proin quis erat nisl, sit amet ullamcorper ipsum. Phasellus rhoncus viverra pharetra. Fusce interdum, metus vitae cursus vulputate, libero lorem dictum neque, in scelerisque arcu sem et ligula. Fusce scelerisque scelerisque mollis. Vestibulum ac libero eu nisl adipiscing feugiat. Aenean vitae arcu ut odio pellentesque rhoncus. Aliquam mattis lectus eget lectus fringilla condimentum. Vivamus vel velit et neque molestie euismod eget faucibus eros. Aenean sed enim quis elit commodo suscipit ut nec arcu. Donec eget odio nisl, eget rutrum tellus. Mauris iaculis dapibus tincidunt. Sed blandit aliquet dictum. Vestibulum et lorem a dolor adipiscing ullamcorper id non metus.</p>
				<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mattis risus et lacus mollis pulvinar. Curabitur volutpat nisl vitae erat mollis egestas. Nam et enim metus, ut imperdiet ligula. Mauris blandit luctus semper. Cras neque felis, bibendum ac mollis nec, consectetur at lorem. Donec ut dolor nunc, ut volutpat enim. Vivamus vel neque arcu, non malesuada ligula. Vestibulum tortor orci, tristique at posuere non, tristique quis tellus. Cras luctus volutpat dolor, non varius tellus tempor quis. Praesent vel egestas nibh. Phasellus venenatis quam nec arcu venenatis auctor. Duis viverra diam sit amet mauris varius molestie. Integer felis lacus, condimentum vitae convallis sit amet, sagittis vitae arcu. Proin tellus eros, consectetur non lacinia ut, rhoncus ut augue.</p>
				<p>Duis vitae leo dui, nec sollicitudin magna. Pellentesque vel mauris turpis. Nulla id sapien condimentum nisi fermentum faucibus id ac tortor. Donec ipsum urna, elementum non euismod at, luctus ut tellus. Sed et urna enim. Cras mattis dui sit amet felis vehicula hendrerit. Donec mattis eros in erat imperdiet at pharetra ipsum luctus. Sed tempus ultrices diam, nec porttitor risus semper et. Integer tempus massa non elit euismod facilisis vehicula sapien viverra. Nunc quis nisi at augue placerat congue sed ut nunc. Sed scelerisque lectus at libero vestibulum rhoncus. Proin mattis ante sed orci luctus id sodales mi dictum. Etiam purus ligula, tempor in dignissim sit amet, elementum quis lorem. Etiam magna est, faucibus eu congue a, aliquet vitae leo. Nunc et purus et elit ultricies aliquam. Fusce nec lorem ac arcu suscipit faucibus non et eros.</p>
				<p>Donec quis lacus eu purus euismod vehicula. Donec dictum sagittis imperdiet. Fusce nisi massa, lacinia in hendrerit vitae, hendrerit non augue. Aenean at metus ipsum, in ultrices risus. Mauris nisl elit, sagittis ac malesuada vel, tincidunt ut massa. Praesent sed mi quam, sed porttitor lectus. In sed lectus orci. Vestibulum magna massa, lobortis quis semper sed, interdum nec nibh. Sed sit amet ante nulla, eget dignissim justo. Pellentesque euismod, libero vel ornare aliquam, metus nunc aliquet nulla, eu rutrum est sem nec nisl. Cras lobortis lectus et quam ultrices fringilla.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna tellus, sagittis et luctus id, sollicitudin vel mauris. Nulla facilisi. Integer ultrices ligula quis urna fermentum vulputate. Praesent laoreet ultrices est id molestie. Sed augue dui, fermentum in hendrerit vel, ullamcorper a sem. Vestibulum sed luctus odio. Fusce non erat vel mauris faucibus dignissim at porta nunc. Vestibulum eget ligula quis elit condimentum viverra. Phasellus hendrerit ultrices placerat.</p>
				<p>Proin quis erat nisl, sit amet ullamcorper ipsum. Phasellus rhoncus viverra pharetra. Fusce interdum, metus vitae cursus vulputate, libero lorem dictum neque, in scelerisque arcu sem et ligula. Fusce scelerisque scelerisque mollis. Vestibulum ac libero eu nisl adipiscing feugiat. Aenean vitae arcu ut odio pellentesque rhoncus. Aliquam mattis lectus eget lectus fringilla condimentum. Vivamus vel velit et neque molestie euismod eget faucibus eros. Aenean sed enim quis elit commodo suscipit ut nec arcu. Donec eget odio nisl, eget rutrum tellus. Mauris iaculis dapibus tincidunt. Sed blandit aliquet dictum. Vestibulum et lorem a dolor adipiscing ullamcorper id non metus.</p>
				<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mattis risus et lacus mollis pulvinar. Curabitur volutpat nisl vitae erat mollis egestas. Nam et enim metus, ut imperdiet ligula. Mauris blandit luctus semper. Cras neque felis, bibendum ac mollis nec, consectetur at lorem. Donec ut dolor nunc, ut volutpat enim. Vivamus vel neque arcu, non malesuada ligula. Vestibulum tortor orci, tristique at posuere non, tristique quis tellus. Cras luctus volutpat dolor, non varius tellus tempor quis. Praesent vel egestas nibh. Phasellus venenatis quam nec arcu venenatis auctor. Duis viverra diam sit amet mauris varius molestie. Integer felis lacus, condimentum vitae convallis sit amet, sagittis vitae arcu. Proin tellus eros, consectetur non lacinia ut, rhoncus ut augue.</p>
				<p>Duis vitae leo dui, nec sollicitudin magna. Pellentesque vel mauris turpis. Nulla id sapien condimentum nisi fermentum faucibus id ac tortor. Donec ipsum urna, elementum non euismod at, luctus ut tellus. Sed et urna enim. Cras mattis dui sit amet felis vehicula hendrerit. Donec mattis eros in erat imperdiet at pharetra ipsum luctus. Sed tempus ultrices diam, nec porttitor risus semper et. Integer tempus massa non elit euismod facilisis vehicula sapien viverra. Nunc quis nisi at augue placerat congue sed ut nunc. Sed scelerisque lectus at libero vestibulum rhoncus. Proin mattis ante sed orci luctus id sodales mi dictum. Etiam purus ligula, tempor in dignissim sit amet, elementum quis lorem. Etiam magna est, faucibus eu congue a, aliquet vitae leo. Nunc et purus et elit ultricies aliquam. Fusce nec lorem ac arcu suscipit faucibus non et eros.</p>
				<p>Donec quis lacus eu purus euismod vehicula. Donec dictum sagittis imperdiet. Fusce nisi massa, lacinia in hendrerit vitae, hendrerit non augue. Aenean at metus ipsum, in ultrices risus. Mauris nisl elit, sagittis ac malesuada vel, tincidunt ut massa. Praesent sed mi quam, sed porttitor lectus. In sed lectus orci. Vestibulum magna massa, lobortis quis semper sed, interdum nec nibh. Sed sit amet ante nulla, eget dignissim justo. Pellentesque euismod, libero vel ornare aliquam, metus nunc aliquet nulla, eu rutrum est sem nec nisl. Cras lobortis lectus et quam ultrices fringilla.</p>
			</div>
		</div>
	</body>
</html>

Es un codigo con jquery muy basico, debes notar un par de cosas, con $(window).load(function(){ estoy diciendo que el codigo que contiene esa funcion se ejecute una vez cargado el dom de la pagina, para asegurarme de que las capas tengan su css correspondiente asignado.

Lo otro que utilizo es parseInt(), es solo paranoia jajaja, para asegurarme de que el valor sea numerico y luego lo pueda utilizar para hacer operaciones matematicas.

Saludos