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

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

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

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

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

9
css html javascript jquery resize

4 ответов

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

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

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

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

11

использовать позицию CSS: абсолютная / относительная в сочетании с CSS сверху/снизу/слева / справа. Пример:

<!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>
7

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

например:

window.onresize = function() {
//your code
}
6

положение должно быть исправлено, поэтому оно будет изменено автоматически.

Если высота экрана изменилась во время выполнения

поместите это в CSS-лист:

#FitScreenHeight
{
    position:fixed
    height:100%
}
1