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

  });

使用JS

1 个答案: