Tamaño vertical relativo y overflow en div

JUANFM · #1 (**permalink**) 29/11/2012, 05:45

Hola a todos amigos!!! A ver si alguien puede resolverme esta cuestion.

<div id="contenedor">
<div id="arriba"></div>
<div id="abajo"></div>
</div>

el css

#contenedor
{
position relative;
float:left;
width=600px;
height=100%;
max-height="100%";
overflow=hidden";
{

#arriba
{
position:relative;
width=100%;
height=50px;
}

#abajo
{
position:relative;
width=100%;
height=?????? AQUI EL PROBLEMA
}

Lo que quiero conseguir es que el div abajo ocupe el resto de espacio disponible sea cual sea el tamaño del div arriba; y que si se produce un overflo aparezca el scroll vertical en este div. Es posible hacer eso cuando se trabaja con tamaños verticales relativos???

Muchisimas gracias a todos!!!!

pzin · #2 (**permalink**) 29/11/2012, 07:03

Si crees que el problema está realmente donde indicas, yo casi que te recomendaría visitar algún tutorial muy muy básico de CSS. No sé de donde has sacado ese estilo tan libertino de declarar propiedades y valores.

¿Conoces al Sr. Highlight? Es para poner código en los mensajes, para ayudar a nuestra vista cuando posteas código en el foro.

chichote · #3 (**permalink**) 29/11/2012, 08:47

Bueno, primero que todo quiero aclarar un punto, este foro no es para que te solucionen los problemas, si para aclarar dudas, solicitar ayuda, tambien compartir y aportar.

Aclarado eso, te dejo una posible solucion.

Código:

<!DOCTYPE html>
<html lang="en">
	<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:absolute;
				left:0;
				top:0;
				width:100%;
				height:50px;
				background:red;
				z-index: 2;
			}
			#abajo{
				position:relative;
				width:100%;
				background:black;
				height:100%;
				z-index: 1;
			}
			#abajo .contenedor-abajo{
				padding-top:50px;
			}
		</style>
	</head>
	
	<body>
		<div id="contenedor">
			<div id="arriba">Arriba</div>
			<div id="abajo">
				<div class="contenedor-abajo">Abajo</div>
			</div>
		</div>
	</body>
</html>

Saludos.

JUANFM · #4 (**permalink**) 29/11/2012, 10:54

Hola a todos, siento mucho haber posteado de esa forma, lleváis razón, de hecho no lo he expresado como me gustaría ya que no tenia internet y lo hice desde la BlackBerry pero antes de postearlo he mirado cientos uy cientos de soluciones, pense que poniéndolo aquí ademas le podría servir a alguien que tenga mi mismo problema, lo mismo es una chorrada de pregunta pero se me ha atragantado. Chicote, esa opción que tu me das ya la había probado yo, a ver hay un detalle, y es que así cuando se hace overflow la barra de desplazamiento queda por debajo de la capa de arriba, yo lo que quiero es, vista esta modificación del código, que la caba de abajo aparezcan las barras de desplazamiento. Vuelvo a reformular mi pregunta... es posible hacer que, siendo la capa superior posicionamiento relativo y un alto específico, la capa inferior, tambien relativa, ocupe el 100% del ancho que deja esta con respecto al contenedor?

Código HTML:

Ver original<!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;
                height:100%;
                z-index: 1;
                overflow:auto;
                max-height:100%;
            }
            
        </style>
    </head>
    
    <body>
        <div id="contenedor">
            <div id="arriba">Arriba</div>
            <div id="abajo"></div>
        </div>
    </body>
</html>

Así de esta forma, ademas de la barra de desplazamiento del div, me sale la barra de desplazamiento lateral de un tamaño igual al que ocupa el div "arriba"

gracias a todos y perdon por las molestias.

pzin · #5 (**permalink**) 29/11/2012, 12:32

Cita:

Iniciado por JUANFM

es posible hacer que, siendo la capa superior posicionamiento relativo y un alto específico, la capa inferior, tambien relativa, ocupe el 100% del ancho que deja esta con respecto al contenedor?

Sólo con CSS no se puede. Tendrías que usar javascript. Vamos, al menos yo no sabría como. Pero estoy casi seguro de que no se puede.

El problema es que el 100% se refiere al elemento padre. Por eso el espacio sobrante es igual al div de arriba, porque contenedor ocuparía su 100% (de #abajo) de la altura más todas las demás alturas (en este caso #arriba). Te iba a poner un arreglo, pero era algo parecido a lo de chicote.

Tal vez si explicas por y para qué lo quieres así, exista alguna otra solución en CSS.

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

jmdearpe · #7 (**permalink**) 29/11/2012, 16:14

Hola Juan,

Como comentan en el post anterior, el problema es que con css de momento no se pueden realizar operaciones matemáticas.

Si las dos capas dentro de la capa madre tuviesen un porcentaje en altura entonces si, pero no es tu caso, tu quieres una cabecera en pixeles y la otra que ocupe el resto y para eso además hay que acceder a la altura de window y/o de document.

Te paso un ejemplo que además de hacer lo que hace el que ha puesto el anterior compañero, te redimensionaría la capa en el evento de window resize.

Código HTML:

<!DOCTYPE html>
<html>
<head>


<meta charset="iso-8859-1" />

<meta name="lang" content="es" />
<meta name="generator" content="editplus"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
div#contenedor
{
	max-height:100%;  position:relative;
	min-height:100%;
	height:100%;
	max-width:100%;
	min-width:100%;
	width:100%;	
}
div#contenedor div#cabecera
{
	max-height:200px;  position:relative;
	min-height:200px;
	height:200px;
	max-width:980px;
	min-width:980px;
	width:980px;
	margin: 0 auto;
	background:#000000
}
div#contenedor div#contenido
{
	position:relative
	max-height:100px;
	min-height:100px;
	height:100px;
	max-width:980px;
	min-width:980px;
	width:980px;   display:block;;
	margin: 0 auto;
	background:#333333;overflow:auto;
}

</style>
</head>


<body id="body" style="height: 100%;width:100%;margin:auto;position:relative;margin:0">
<div id="contenedor">
	<div id="cabecera">
	</div>
	<div id="contenido">
	<div style="pading:10px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate dignissim dictum. Aliquam erat volutpat. Donec dictum convallis erat, eu posuere neque ullamcorper sit amet. Sed facilisis posuere tristique. Nam adipiscing, quam ac pellentesque dapibus, ante metus pharetra dolor, non varius justo lorem vitae est. Mauris tempor molestie metus, vitae rutrum risus mattis nec. Ut leo tellus, congue vitae ultrices a, commodo quis mauris. Sed tortor arcu, convallis a consectetur non, tincidunt et orci. Proin lobortis, leo non egestas tristique, velit libero ornare libero, varius ornare arcu ante sit amet tortor. Nullam tempor rutrum neque nec porttitor. Quisque mollis, risus eget pharetra egestas, erat velit fringilla risus, id lacinia mi elit ac erat. Mauris vestibulum laoreet rutrum. Praesent eu sollicitudin eros. Curabitur metus dui, consequat bibendum egestas ac, semper id erat.

In ullamcorper diam vel diam tempus consequat. Mauris a magna elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui est, auctor ac ultrices sit amet, porta vitae purus. Suspendisse at mauris mi, sed pharetra erat. Donec dolor nisi, porttitor semper placerat non, imperdiet at urna. Donec volutpat viverra risus, nec semper magna faucibus et. Aliquam ut diam nibh, sed mattis libero. Ut convallis molestie tellus, nec malesuada ligula sollicitudin vel. Duis pharetra, eros condimentum tristique blandit, tortor ante interdum magna, eu vestibulum tortor ligula eget mi. Duis consectetur tincidunt hendrerit.

Curabitur blandit quam sed metus tincidunt quis faucibus justo rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas a diam vel turpis lobortis sodales nec eget sapien. Duis congue ultricies elit non euismod. Curabitur sollicitudin aliquet magna, et convallis tortor mattis nec. Duis sit amet ligula est. Etiam posuere lectus ante. Maecenas sagittis tempus lectus, id bibendum nisl mollis sit amet. Mauris rhoncus, velit et consequat malesuada, diam velit molestie nisl, at egestas quam erat in magna. Fusce id justo dui, et laoreet erat. Sed pretium, mi ac fringilla sollicitudin, magna tellus sollicitudin urna, et tempor nisi quam porta justo. Vestibulum pharetra tempus laoreet. In at lectus eget mi vehicula lacinia vitae sit amet nulla. Vivamus malesuada sem non tortor eleifend at rutrum nisl consectetur. Praesent vel justo et justo accumsan ultrices.

Duis massa justo, semper eu ultricies quis, dapibus ac erat. Suspendisse eget elit sapien. Maecenas a nisl purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate orci eget arcu auctor commodo. Aliquam placerat lacus et leo rhoncus molestie. Fusce dui felis, ultrices at viverra vitae, ullamcorper at leo. Etiam viverra rutrum lacus nec suscipit. Cras dictum laoreet ipsum, sed laoreet ipsum sagittis et. Ut posuere diam ut dui ultricies eu pretium justo euismod. Aenean vitae libero in justo dignissim sagittis vitae vitae felis. Sed interdum bibendum augue in sollicitudin. Nullam bibendum sagittis diam non pretium.

Pellentesque in lacus a orci ullamcorper mollis. Donec odio tellus, eleifend at sodales eu, bibendum pulvinar sem. Nullam ut felis sit amet eros accumsan congue id nec arcu. Integer scelerisque libero sed odio ultricies sit amet imperdiet tellus ornare. Donec iaculis arcu quis sapien luctus vitae dictum ipsum ornare. Vivamus semper, quam fermentum dapibus sodales, mauris metus feugiat elit, eu posuere velit augue at enim. Integer eros sem, congue vitae fermentum vel, pulvinar nec ante. Nam a arcu tellus. Aliquam pretium, sapien mattis congue bibendum, sem nulla mollis ligula, nec pretium mi metus eu lectus. Proin sodales sollicitudin felis, sit amet molestie justo auctor non. Cras id dolor mi. Nulla at urna et enim vestibulum mattis at et lectus. Sed lectus nulla, luctus malesuada lacinia sed, pellentesque sed velit. Pellentesque a justo eget augue eleifend pretium id eget ligula. 
		</div>
	</div>
<script>

function midealtocapa()
{

	alto=	$(window).height()-200;
	$("#contenido").height(alto)
}
$(window).resize
(
	function() 
	{
		midealtocapa();	 
	}
);

$(document).ready
(
	function()
	{      
		midealtocapa();
	}
);
</script>
</body>
</html>

Salu2 ;)

JUANFM · #8 (**permalink**) 29/11/2012, 17:21

Muchisimas gracias a todos... si parece ser que solo con javascript se puede ya que como bien dicen aqui no se puede mediante operaciones matemáticas, estoy implementandolo, era algo que veia tan simple que no sabia que me diese tantos quebraderos de cabeza. En cuanto lo haga os lo pondre aquí por si le puede ayudar a alguien mas.... Saludos a tod@s!!!