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

5uzkadbs  于 2022-12-22  发布在  jQuery
关注(0)|答案(7)|浏览(264)

我有3个div,id为headercontentfooter。页眉和页脚有固定的高度,它们被设计为浮动在顶部和底部。我想用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;
}
wyyhbhjk

wyyhbhjk1#

你可以这么做

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

i2loujxw

i2loujxw2#

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

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

额外的好处是你不需要附加到window.onresize事件!所有的东西都会随着文档的重排而调整。所有这些都是为了四行CSS的超低价格!

dbf7pr2w

dbf7pr2w3#

在我的脑海里:

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

你是这个意思吗?

az31mfrm

az31mfrm4#

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

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​
pkbketx9

pkbketx95#

$(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"} );
}
raogr8fs

raogr8fs6#

我想会有用的。

$('#DivID').height('675px');
gc0ot86w

gc0ot86w7#

这可能会奏效:

window.addEventListener('resize', function(event) {
    document.querySelector('#middle').style.height = 
    window.innerHeight - $('#header').height() + $('#footer').height() + 'px';
}, true);

相关问题