Регулировка ширины панелей с использованием 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); 

    });