兩個twitter自舉列，都需要有相同的高度

Question

我需要右列與左列具有相同的高度，因爲邊框需要一直走到頁面的末尾，它是分開的的設計。

我想過在行類上設置邊框，但列和行之間存在間距，無法覆蓋該間距。

任何幫助獲得正確的專欄拉伸整個頁面將不勝感激，謝謝。

http://www.bootply.com/117727

CSS

html, body { min-height: 100%; } 
.container { min-height: 100%; } 
.left { border: 1px solid red; } 
.row { border: 1px solid purple; } 
.right { border: 1px solid green; height: 100%; } 

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="col-sm-8 left"> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
      <p>this is a paragraph</p> 
     </div> 
     <div class="col-sm-4 right"> 
      <p>this is a paragraph</p> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

添加類.equalCol到這兩個立柱。並使用這個jQuery代碼來完成這個魔術。

BOOTPLY DEMO

var highestCol = Math.max($('.left').height(),$('.right').height()); 
$('.equalCol').height(highestCol); 

此處的代碼計算和比較兩個柱的高度和存儲在所述highestCol變量的最大值。之後，最高值正通過相同類別應用於兩列，即.equalCol