JQuery：dynamic height（）with window resize（） [英] JQuery: dynamic height() with window resize()
问题描述
我遇到与此海报相同的问题：
Jquery问题with height（）and resize（）
I'm having an issue identical to this poster: Jquery problem with height() and resize()
但是解决方案不能解决我的问题。我有三个堆积的div，我想使用JQuery，使中间的一个高度调整到100％的窗口高度，减去另一个顶部&的高度（23px * 2）底部divs。
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.
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
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);
}
推荐答案
没有JavaScript解决方案，但是这是怎么回事？
I feel like there should be a no javascript solution, but how is this?
http：// jsfiddle。 net / NfmX3 / 2 /
$(window).resize(function() {
$('#content').height($(window).height() - 46);
});
$(window).trigger('resize');
这篇关于JQuery：dynamic height（）with window resize（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
