jquery - 使用 jquery 设置 div 高度(拉伸(stretch) div 高度)

Question

我有 3 个 div，分别是 header、content 和 footer。页眉和页脚具有固定的高度，并且它们被设计为 float 在顶部和底部。我想要使​​用 jquery 自动计算中间的 content 高度。我怎样才能使这成为可能？？

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

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

});

在这里查看 fiddle :http://jsfiddle.net/maniator/JVKbR/
演示:http://jsfiddle.net/maniator/JVKbR/show/