Javascript 根据浏览器窗口的大小动态调整div的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8717506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize div based on size of browser window
提问by INT
I'm trying to figure out how to have a div dynamically resize, based on the size of the browser window. I've set up a jsbin that illustrates my problem, here: http://jsbin.com/uxomul
我试图弄清楚如何根据浏览器窗口的大小动态调整 div 的大小。我已经设置了一个 jsbin 来说明我的问题，在这里：http://jsbin.com/uxomul
What I want to do is to resize the div that holds the images so that the div always fills what's left of the height of the browser window (except a 25px margin at the bottom, that's set on body).
我想要做的是调整保存图像的 div 的大小，以便 div 始终填充浏览器窗口高度的左侧（底部的 25px 边距除外，这是在 body 上设置的）。
Here's a demo that maybe illustrates what I want to achieve more clearly: http://emilolsson.com/shop/demo/layers
这是一个演示，可能更清楚地说明了我想要实现的目标：http: //emilolsson.com/shop/demo/layers
Any ideas what would be the best way to approach this?
任何想法什么是最好的方法来解决这个问题？
回答by Ortiga
You can do something like this:
你可以这样做：
var width = $(window).width() - 25;
$("#mydiv").width(width);
25 is just a sample number, for example your margin (you can get this dynamically too)
25 只是一个样本数字，例如您的保证金（您也可以动态获取）
You may also want to wrap it into a function and call this on both page load and on resize
您可能还想将它包装成一个函数并在页面加载和调整大小时调用它
回答by scripto
You can try to bind to the resize event of the browser's window.
可以尝试绑定到浏览器窗口的resize事件。
For example:
例如：
window.onresize = function() {
//your code
}
回答by F i L
Use CSS position:absolute/relative in combination with CSS top/bottom/left/right. Example:
将 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>
回答by Tarek
Position must be fixed so it will be resized automatically.
位置必须固定，以便自动调整大小。
If screen height changed in run time
如果屏幕高度在运行时发生变化
Put this in CSS sheet:
把它放在 CSS 表中：
#FitScreenHeight
{
position:fixed
height:100%
}
