Я пытаюсь понять, как динамически изменять размер div в зависимости от размера окна браузера. Я создал jsbin, который иллюстрирует мою проблему, здесь: http://jsbin.com/uxomul
Я хочу изменить размер div, содержащего изображения, так, чтобы div всегда заполнял то, что находится слева от высоты окна браузера (за исключением 25px поля внизу, которое задается в body).
Вот демонстрация, которая может более наглядно показать, чего я хочу добиться: http://emilolsson.com/shop/demo/layers.
Есть идеи, как лучше всего подойти к этому?
Вы можете сделать что-то вроде этого:
var width = $(window).width() - 25;
$("#mydiv").width(width);
25 - это просто примерное число, например, ваша маржа (ее можно получить и динамически).
Вы также можете обернуть это в функцию и вызывать ее при загрузке страницы и при изменении размера
Используйте CSS position:absolute/relative в сочетании с CSS top/bottom/left/right. Пример:
<!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>