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

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);
        });
});