等高通過腳本

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