等高通过脚本

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 { 显示： 柔性; }

.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