JQuery：动态高度（）与窗口调整大小（）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8130946/
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
JQuery: dynamic height() with window resize()
提问by Gregir
I'm having an issue identical to this poster: Jquery problem with height() and resize()
我遇到了与此海报相同的问题： Jquery question with height() 和 resize()
But the solution doesn't fix my issue. I have three stacked divs, and I want to use JQuery to make the middle one adjust in height to 100% of the window height, minus the height (23px * 2) of the other top & bottom divs. It works on resize, but it's off (short) by 16px when the document initially loads.
但解决方案并不能解决我的问题。我有三个堆叠的 div，我想使用 JQuery 使中间的高度调整为窗口高度的 100%，减去其他顶部和底部 div 的高度 (23px * 2)。它适用于调整大小，但在文档最初加载时关闭（短）16px。
HTML
HTML
<body>
<div id="bg1" class="bg">top</div>
<div id="content">
help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>
CSS
CSS
html,
body {
width:100%;
height:100%;
}
.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}
#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}
#content {
width:450px;
margin:0 auto;
text-align: center;
}
JQuery
查询
$(document).ready(function(){
resizeContent();
$(window).resize(function() {
resizeContent();
});
});
function resizeContent() {
$height = $(window).height() - 46;
$('body div#content').height($height);
}
回答by mrtsherman
I feel like there should be a no javascript solution, but how is this?
我觉得应该没有 javascript 解决方案，但这是怎么回事？
$(window).resize(function() {
$('#content').height($(window).height() - 46);
});
$(window).trigger('resize');
回答by mrtsherman
Okay, how about a CSS answer! We use display: table. Then each of the divs are rows, and finally we apply height of 100% to middle 'row' and voilà.
好的，CSS 答案怎么样！我们使用display: table. 然后每个 div 都是行，最后我们将 100% 的高度应用于中间的“行”，瞧。
body { display: table; }
div { display: table-row; }
#content {
width:450px;
margin:0 auto;
text-align: center;
background-color: blue;
color: white;
height: 100%;
}
回答by ZHAM
The cleanest solution - also purely CSS - would be using calc and vh.
最干净的解决方案 - 也是纯 CSS - 将使用 calc 和 vh。
The middle div's heigh will be calculated thusly:
中间 div 的高度将这样计算：
#middle-div {
height: calc(100vh - 46px);
}
That is, 100% of the viewport height minus the 2*23px. This will ensure that the page loads properly and is dynamic(demo here).
也就是说，100% 的视口高度减去 2*23px。这将确保页面正确加载并且是动态的（此处为演示）。
Also remember to use box-sizing, so the paddings and borders don't make the divs outfill the viewport.
还要记住使用 box-sizing，所以填充和边框不会使 div 填满视口。
回答by SuSanda
To see the window height while (or after) it is resized, try it:
要在调整大小时（或之后）查看窗口高度，请尝试：
$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});
