Равная высота по сценарию

Question

Это боль использовать равную высоту с чистым css, который поддерживает как минимум ie9 и хорошие браузеры. Итак, я решил использовать js вместо этого. Если на стороне пользователя нет js, то, не имея равных высот, является наименьшей из моих проблем.

Однако у меня есть очень конкретная просьба об этой ситуации «равной высоты».

Использование гибкого, с помощью других пользователей SO, мы можем иметь:

http://jsfiddle.net/4an5r1b3/1/

HTML

<div class="container"> 
    <div class="col left"> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <div class="bottom-yeah"> 
      <p>lorem ipsium</p> 
      <p>lorem ipsium</p> 
      <p>lorem ipsium</p> 
     </div> 

    </div> 
    <div class="col right"> 
     <p>lorem ipsium</p>  
     <p>lorem ipsium</p>  
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
     <p>lorem ipsium</p> 
    </div> 
</div> 

CSS: .container { дисплей : flex; }

.col { 
    float: left; 
    width: 30%; 
    color: #fff; 
} 

.col.left { 
    display: flex; 
    flex-direction: column; 
    background-color: transparent; 
    color: red; 
} 

.col.right { 
    background-color: blue; 
} 

.bottom-yeah { 
    flex-grow: 1; 
    margin-top: 50px; 
    background-color: yellow; 
} 

Я интересно, если мы можем достичь того же, с помощью JQuery, так что старые браузеры могли бы вести себя так же?

Любой известный скрипт, который делает это, чтобы мы не изобретали здесь колесо?

Answer 1

var leftHeight = $('.col.left').height(); 
var rightHeight = $('.col.right').height(); 

if (leftHeight > rightHeight) 
{ 
    $('.col.right').height(leftHeight); 
} else { 
    $('.col.left').height(rightHeight); 
} 

Если ваш сайт реагирует, вы можете поместить это в функцию и вызвать его на $ (окно) .resize