根据浏览器窗口的大小动态调整div的大小

Question

我试图弄清楚如何根据浏览器窗口的大小动态调整div。 我已经设置了一个jsbin来说明我的问题，在这里： http ：//jsbin.com/uxomul

我想要做的是调整保存图像的div的大小，以便div总是填充浏览器窗口高度的左边（除了底部的25px边距，设置在正文上）。

这是一个演示，可能会说明我想要更清楚地实现的目标： http ： //emilolsson.com/shop/demo/layers

任何想法什么是最好的方法来解决这个问题？

Answer 1

你可以这样做：

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

25只是一个样本数，例如你的保证金（你也可以动态得到这个）

您可能还希望将其包装到函数中，并在页面加载和调整大小时调用它

Answer 2

使用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>

Answer 3

您可以尝试绑定到浏览器窗口的resize事件。

例如：

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

Answer 4

必须修复位置，以便自动调整大小。

如果屏幕高度在运行时更改

把它放在CSS表格中：

#FitScreenHeight
{
    position:fixed
    height:100%
}

根据浏览器窗口的大小动态调整div的大小

问题描述

4 个解决方案

解决方案1
11 已采纳 2012-01-03 19:30:20

解决方案2
7 2012-01-03 20:54:42

解决方案3
6 2012-01-03 19:25:11

解决方案4
1 2015-11-02 11:36:39

根据浏览器窗口的大小动态调整div的大小

问题描述

4 个解决方案

解决方案1 11 已采纳 2012-01-03 19:30:20

解决方案2 7 2012-01-03 20:54:42

解决方案3 6 2012-01-03 19:25:11

解决方案4 1 2015-11-02 11:36:39

解决方案1
11 已采纳 2012-01-03 19:30:20

解决方案2
7 2012-01-03 20:54:42

解决方案3
6 2012-01-03 19:25:11

解决方案4
1 2015-11-02 11:36:39