I'm tratando de averiguar cómo tener un div dinámicamente cambiar el tamaño, basado en el tamaño de la ventana del navegador. I've configurar un jsbin que ilustra mi problema, aquí: http://jsbin.com/uxomul
Lo que quiero hacer es cambiar el tamaño del div que contiene las imágenes para que el div siempre llena lo que's a la izquierda de la altura de la ventana del navegador (excepto un margen de 25px en la parte inferior, que's establecido en el cuerpo).
Aquí'hay una demo que tal vez ilustre lo que quiero conseguir más claramente: http://emilolsson.com/shop/demo/layers
¿Alguna idea de cuál sería la mejor manera de enfocar esto?
Puedes hacer algo así:
var width = $(window).width() - 25;
$("#mydiv").width(width);
25 es sólo un número de muestra, por ejemplo, su margen (se puede obtener de forma dinámica también)
También puede ser que desee envolver en una función y llamar a esto tanto en la carga de la página y en el cambio de tamaño
Utilice CSS position:absolute/relative en combinación con CSS top/bottom/left/right. Ejemplo:
<!doctype html>
<html>
<head>
<style>
html, body { margin:0; padding:0; width:100%; height:100%; }
#head { width:100%; height:100px; background:black; color:white; }
#head > h1 { margin:0; }
#body { position:absolute; width:100%; top:100px; bottom:25px; background:red; }
#body > div { position:absolute !important; }
#body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; }
#body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; }
#body-content > img { margin:25px; width:500px; vertical-align:middle; }
</style>
</head>
<body>
<!-- Head -->
<div id="head">
<h1>Header</h1>
</div>
<!-- Body -->
<div id="body">
<!-- Sidebar -->
<div id="body-sidebar">
<h2>Sidebar</h2>
</div>
<!-- Content -->
<div id="body-content">
<h2>Content</h2>
<img src="http://dl.dropbox.com/u/3618143/image1.jpg" />
<img src="http://dl.dropbox.com/u/3618143/image2.jpg" />
<img src="http://dl.dropbox.com/u/3618143/image3.jpg" />
</div>
</div>
</body>
</html>