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

【问题标题】：Dynamically resize div based on size of browser window根据浏览器窗口的大小动态调整 div 的大小
【发布时间】：2015-11-02 19:36:39
【问题描述】：

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

我想要做的是调整包含图像的 div 的大小，以便 div 始终填充浏览器窗口高度的剩余部分（底部的 25px 边距除外，这是在 body 上设置的）。

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

您知道解决此问题的最佳方法是什么吗？

【问题讨论】：

标签： javascript jquery html css resize

【解决方案1】：

你可以这样做：

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

25 只是一个示例编号，例如您的保证金（您也可以动态获取）

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

【讨论】：

完美运行，没想到会这么简单，谢谢！编辑：现在意识到我需要使用 -120 而不是 -25，这是为什么呢？ jsbin.com/afokor
可能还有其他一些你没有考虑到的东西，比如边框、填充、正文边距等。如果你知道你需要的所有元素，你可以在每个元素上使用jQuery(element).outerWidth(true) /跨度>
通过 $(element).attr('width', 100) 设置宽度将设置宽度值，但不会在调用时调整元素的大小。值得一提。您还可以使用 $('element').css('width', '100px') 在调用时调整元素的大小。

【解决方案2】：

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

例如：

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

【讨论】：

【解决方案3】：

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

【讨论】：

嗯，我在本地和 jsbin 上都试过了（不是说会有什么不同），但它似乎不起作用？ jsbin.com/oxeqok
它在 Chrome、FF、IE 7+、Safari 和 Opera 下对我本地有效。该示例显示三个部分：标题、侧边栏和内容。侧边栏和内容都水平填充页面（减去 25 像素的底部边距）。头部高度为 100 像素，侧边栏宽度为 200 像素。为简单起见，内容填充了剩余区域并具有滚动条，尽管可以实现自定义幻灯片式滚动效果（如您的示例中）。你看到了什么？

【解决方案4】：

位置必须固定，以便自动调整大小。

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

把它放在 CSS 表中：

#FitScreenHeight
{
    position:fixed
    height:100%
}

【讨论】：