Динамическое изменение размера div в зависимости от размера окна браузера

Я пытаюсь понять, как динамически изменять размер div в зависимости от размера окна браузера. Я создал jsbin, который иллюстрирует мою проблему, здесь: http://jsbin.com/uxomul

Я хочу изменить размер div, содержащего изображения, так, чтобы div всегда заполнял то, что находится слева от высоты окна браузера (за исключением 25px поля внизу, которое задается в body).

Вот демонстрация, которая может более наглядно показать, чего я хочу добиться: http://emilolsson.com/shop/demo/layers.

Есть идеи, как лучше всего подойти к этому?

Программирование
javascript html jquery css resize
3-го января 2012 в 7:21
7 просмотров
Решение

Вы можете сделать что-то вроде этого:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 - это просто примерное число, например, ваша маржа (ее можно получить и динамически).

Вы также можете обернуть это в функцию и вызывать ее при загрузке страницы и при изменении размера

Комментарии (3)

Используйте CSS position:absolute/relative в сочетании с CSS top/bottom/left/right. Пример:





            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; }






        <div id="head">
            <h1>Header</h1>
        </div>


        <div id="body">


            <div id="body-sidebar">
                <h2>Sidebar</h2>
            </div>


            <div id="body-content">
                <h2>Content</h2>



            </div>

        </div>
Комментарии (2)

Можно попробовать привязаться к событию изменения размера окна браузера.

Например:

window.onresize = function() {
//your code
}
Комментарии (0)