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

    });