javascript - 使用JS调整面板的宽度

Question

我的网站是 www.to-hawaii.com。右侧面板的长度由中间面板的长度控制。换句话说，中间面板将调整为自然较短的右侧面板的长度。在某些情况下，虽然右侧面板较长，但请参阅此处 http://www.to-hawaii.com/bg/这会在右侧创建一个奇怪的卷轴。有没有办法解决这个问题？换句话说，如果有一种方法可以让脚本像这样工作:如果中间面板比右侧面板长，则匹配右侧面板的宽度，使其与中间面板一样长，如果右侧面板更长，则匹配中间面板的宽度，因此它与右侧面板的长度相同。

我目前使用的使右侧面板宽度与中间面板宽度匹配的函数是:

$(document).on('ready',function(){

    if($(window).width() > 768){
        var heightLeft = $(".leftpanel").height();
        var heightMiddle = $(".midpanel").height();
            if(heightLeft >= heightMiddle){
                $(".rightpanel").css("height",heightLeft - 10);
                $(".midpanel").css("height",heightLeft - 10);   
            }else{
                $(".rightpanel").css("height",heightMiddle +2);
            }                   
    } 


    $(window).resize(function(){  

    if($(window).width() >= 768){
        $(".rightpanel").css("height", "auto");
        $(".midpanel").css("height", "auto"); 
        var heightLeft = $(".leftpanel").height();
        var heightMiddle = $(".midpanel").height();
            if(heightLeft >= heightMiddle){
                $(".rightpanel").css("height",heightLeft - 10);
                $(".midpanel").css("height",heightLeft - 10);   
            }if(heightLeft < heightMiddle){
                $(".rightpanel").css("height",heightMiddle +2);
            }                 
    }
    if($(window).width() < 561){
        $(".rightpanel").css("height", "auto");
        $(".midpanel").css("height", "auto");
    }

    })
})

Answer 1

你可以尝试这样的事情:

$(document).on('ready',function(){
    var rightHeight = $('.rightPanel').height();
    var leftHeight  = $('.leftPanel').height();
    var midHeight   = $('.midPanel').height();

    if (rightHeight > midHeight) {
       midHeight = rightHeight; 
       $('.midPanel').css('height', midHeight);
    }
    else if (midHeight > rightHeight) {
       rightHeight = midHeight;
       $('.rightPanel').css('height', rightHeight);
    }

    // If window is resized
    window.addEventListener("resize", adjustPanes);

    function adjustPanes(rightHeight, midHeight) {
        if (rightHeight > midHeight) {
           midHeight = rightHeight;
           $('.midPanel').css('height', midHeight); 
        }
        else if (midHeight > rightHeight) {
           rightHeight = midHeight;
           $('.rightPanel').css('height', rightHeight);
        }
    }
});

或者，您可以将所有三个面板设置为您创建的 wrapper div 的高度。

这将使它们的长度相同。

   $(document).on('ready',function(){
       var wrapperHeight = $('#wrapper').height();
       $('.midPanel').height(wrapperHeight);
       $('.leftPanel').height(wrapperHeight);
       $('.righttPanel').height(wrapperHeight);

  });