CSS-使用jQuery设置div高度(拉伸div高度)

我有3个div,它们的ID为:)content和2769071539860538538370。页眉和页脚具有固定的高度,它们的样式设置为浮动在顶部和底部。 我想用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;
}

在此先感谢... :)

炸药

blasteralfred Ψ asked 2020-02-29T14:40:39Z
5个解决方案
65 votes

好吧,你可以这样做:

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

Neal answered 2020-02-29T14:41:01Z
16 votes

正确的方法是使用陈旧的CSS:

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

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

Shmiddty answered 2020-02-29T14:41:26Z
14 votes

从我的头顶上:

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

你是这个意思吗?

Zirak answered 2020-02-29T14:41:50Z
2 votes

您可以按以下方式绑定函数,而不是在加载时进行初始化

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​
Amol M Kulkarni answered 2020-02-29T14:42:10Z
0 votes
$(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"} );
}
Murat Kezli answered 2020-02-29T14:42:26Z
translate from https://stackoverflow.com:/questions/5541115/set-div-height-using-jquery-stretch-div-height