使用 jquery 设置 div 高度（拉伸 div 高度）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5541115/
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
set div height using jquery (stretch div height)
提问by blasteralfred Ψ
I have 3 divs with ids header, contentand footer. Header and footer has fixed height and they are styled to float on top and bottom. I want the middle contentheight calculated automatically with jquery. How can I make this possible??
我有 3 个带有 ids 的 div header，content并且footer. 页眉和页脚具有固定的高度，并且它们的样式为浮动在顶部和底部。我想content用jquery自动计算中间高度。我怎样才能做到这一点？
#header {
height: 35px;
width: 100%;
position: absolute;
top: 0px;
z-index: 2;
}
#footer {
height: 35px;
width: 100%;
position: absolute;
bottom: 0px;
z-index: 2;
}
Thanks in advance...:)
提前致谢...:)
blasteralfred
布拉拉弗雷德
回答by Naftali aka Neal
well you can do this:
你可以这样做：
$(function(){
var $header = $('#header');
var $footer = $('#footer');
var $content = $('#content');
var $window = $(window).on('resize', function(){
var height = $(this).height() - $header.height() + $footer.height();
$content.height(height);
}).trigger('resize'); //on page load
});
see fiddle here: http://jsfiddle.net/maniator/JVKbR/
demo: http://jsfiddle.net/maniator/JVKbR/show/
在这里看小提琴：http: //jsfiddle.net/maniator/JVKbR/
演示：http: //jsfiddle.net/maniator/JVKbR/show/
回答by Shmiddty
The correct way to do this is with good-old CSS:
正确的方法是使用旧的 CSS：
#content{
width:100%;
position:absolute;
top:35px;
bottom:35px;
}
And the bonus is that you don't need to attach to the window.onresize event! Everything will adjust as the document reflows. All for the low-low price of four lines of CSS!
好处是你不需要附加到 window.onresize 事件！一切都会随着文档重排而调整。全为四行CSS低价！
回答by Zirak
Off the top of my head:
在我的头顶：
$('#content').height(
$(window).height() - $('#header').height() - $('#footer').height()
);
Is that what you mean?
你是这个意思吗？
回答by Amol M Kulkarni
You can bind function as follows, instead of init on load
您可以按如下方式绑定函数，而不是在加载时初始化
$("div").css("height", $(window).height());
$(?window?).bind("resize",function() {
$("div").css("height", $(window).height());
});????
回答by Murat Kezli
$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});
function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/
$('#content').css({"height":calculatecontsize + "px"} );
}
回答by Muhammad Awais
I think will work.
我认为会奏效。
$('#DivID').height('675px');
