두 개의 트위터 부트 스트랩 열은 모두 동일한 높이를 가져야합니다.

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

을 통해 두 값 모두에 가장 높은 값이 적용됩니다.