javascript 如何根据用户的浏览器尺寸动态设置 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11703927/
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
How to set div height dynamically based on user's browser dimensions
提问by Gregg
Using this example:
使用这个例子：
HTML:
HTML：
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="content">
<p><b>Main content</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="sidebar">
<p><b>Sidebar</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
CSS:
CSS：
body {
font: normal 16px/1.5em helvetica, arial, sans-serif
}
p {
text-align:center;
}
#container {
width:960px;
margin:0px auto;
}
#header {
text-align:center;
background: #777;
color:#fff;
height:50px;
padding:5px;
}
#content {
float:right;
width:610px;
text-align:center;
background:#ccc;
padding:150px 5px;
}
#sidebar {
float:left;
width:330px;
text-align:center;
height:300px;
background:#eee;
padding:15px 5px;
overflow:auto;
}
#footer {
clear:both;
text-align:center;
background: #555;
color:#fff;
height:50px;
padding:5px;
}
How do I make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave room for the header)?
如何使“侧边栏”达到用户浏览器高度的 100%（减去 50 像素为标题留出空间）？
I believe it's possible to get the user's browser height using javascript and insert it dynamically into the css, but I don't know how to do that.
我相信可以使用 javascript 获取用户的浏览器高度并将其动态插入到 css 中，但我不知道该怎么做。
回答by undefined
Try the following:
请尝试以下操作：
$('#sidebar').height($(window).height() - 50)
回答by MaxEcho
Div will resize based on browser size
Div 将根据浏览器大小调整大小
$(window).on('load resize', function(){
$('#div').height($(this).height());
$('#div').width($(this).width());
});
回答by paullth
Trying not to use js, is this the sort of effect you wanted? http://jsfiddle.net/FhWxh/4/
尽量不使用js，这是你想要的那种效果吗？http://jsfiddle.net/FhWxh/4/
a bit more complete http://jsfiddle.net/FhWxh/13/show/the whole content size is set by the wrapper (set to 960px) and the footer and header are fixed into position within this, and the content and sidebar are in the container class you used earlier. Its not perfect but i hope it helps
更完整一点http://jsfiddle.net/FhWxh/13/show/整个内容大小由包装器设置（设置为 960px），页脚和页眉固定在其中，内容和侧边栏是在您之前使用的容器类中。它并不完美，但我希望它有所帮助
