Question

每当用户调整浏览器大小时，我目前只有一个DIV调整到窗口的整个高度：

$(window).resize(function() {
    $("#selected-folders-area").height($(window).height()-350);
});

注意：标题内容的-350帐户

我想在此页面中添加第二个DIV，当浏览器调整大小时，两个DIV都需要共享窗口的大小，并将其自身的高度填充到窗口的底部。

我不确定自己是否足够清楚，所以如果你需要我扩展，请告诉我。

Answer 1

这有什么问题？

$(window).resize(function() {
    var h = $(window).height()-350;
    $("#div1,#div2").height(h/2);
});

请注意，如果您希望调整大小与内容成比例...那么......这就是布局表难以击败的情况之一。

你可以有不同的尺码：

$(window).resize(function() {
    var h = $(window).height()-350;
    $("#div1").height(h*0.45);
    $("#div2").height(h*(1-0.45));
});

Answer 2

$(window).resize(function() {
    var availableHeight = $(window).height()-350;
    var usedHeight = $('#div1').outerHeight() + $('#div2').outerHeight();
    var remainingHeight = availableHeight - usedHeight;
    //distribute remaing height to the divs as you like,this is 50/50
    //note that hight will decrease if it takes more than widow height already
    //if dont want that add your condition
    $("#div1,#div2").each(function(){
        $(this).height($(this).height() + remainingHeight/2);
        });

});

相对于窗口大小调整两个DIV的大小

2 个答案: