相對於窗口大小調整兩個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);
        });

});