使用jquery设置di​​v高度(拉伸div高度)

Question

我有3个带有ID的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;
}

提前致谢...:)

blasteralfred

Answer 1

你能做到这一点:

$(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

});

请看这里的小提琴:http ://jsfiddle.net/maniator/JVKbR/
demo:http://jsfiddle.net/maniator/JVKbR/show/

Answer 2

正确的方法是使用古老的CSS:

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

奖金是你不需要附加到window.onresize事件!随着文件的回流,一切都会调整.全部为四线CSS的低价!

Answer 3

脱离我的头顶:

$('#content').height(
    $(window).height() - $('#header').height() - $('#footer').height()
);

你是这个意思吗？

Answer 4

您可以按如下方式绑定函数，而不是加载时 init

\n\n

$("div").css("height", $(window).height());\n$(\xe2\x80\x8bwindow\xe2\x80\x8b).bind("resize",function() {\n    $("div").css("height", $(window).height());\n});\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n