使用 jquery 设置 div 高度（拉伸 div 高度）

Question

我有 3 个 id 为 header ， content 和 footer 的 div。页眉和页脚具有固定的高度，它们的样式设置为浮动在顶部和底部。我想要中间 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;
}

在此先感谢… :)

布雷拉弗雷德

原文由 Alfred 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

演示：http: //jsfiddle.net/maniator/JVKbR/show/

原文由 Naftali 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

正确的做法是使用古老的 CSS：

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

好处是您不需要附加到 window.onresize 事件！一切都会随着文档的重排而调整。一切为了四行CSS的低价！

原文由 Shmiddty 发布，翻译遵循 CC BY-SA 3.0 许可协议