열 패딩을 유지하면서 부트 스트랩 3이있는 높이 열

Question

정규 부트 스트랩 3 CSS 설정이 있습니다. 행 내 열에 동일한 높이를 적용하고 display:table 및 display:table-cell을 사용하여 살펴 보았습니다. 이 방법은 효과적이지만 내용이 적은 열에 수직 패딩을 적용하는 것 같습니다.

이

<div class="row"> 
    <div class="col-xs-4"> 
     <div class="block"> 
      Content for block<br /> 
      Some more content<br /> 
      And a bit more<br /> 
      Last bit 
     </div> 
    </div> 
    <div class="col-xs-8"> 
     <div class="block"> 
      Content for block<br /> 
      Only some more content 
     </div> 
    </div> 
</div> 

그런 다음이 CSS :

.row { 
    display: table; 
    width: 100%; } 

.row > div { 
    float: none; 
    display: table-cell; 
    vertical-align: top; } 

.block { 
    height: 100%; 
    background: red; } 

는 이제 열이 같은 높이가 없지만,이 반영되지 않습니다 빨간색 배경이있는 .block,

예를 들어이 HTML을 가지고 왜냐하면 두 번째 열에는 제거 할 수없는 아래쪽 패딩이 적용되어 있기 때문입니다.

는 예를 들어,이 바이올린을 참조하십시오 http://jsfiddle.net/cyan8fjz/

내 .block 전체 height:100%를 사용하여 얻을 수있는 솔루션이 있습니까? 이상적으로는 열의 왼쪽 및 오른쪽 패딩 (다른 화면 해상도에서 변경 될 수 있음) 때문에 절대적으로 .block을 배치하고 싶지 않습니다.

참고 위의 예에서는 부트 스트랩 CSS를 포함하지 않았지만 나는 바이올린에 있습니다. 관련성이 있으며 모든 예에 포함되어 있다고 가정합니다.

Answer 1

'padding-bottom: 1000em; margin-bottom: -1000em; 트릭과 같이 사용할 수 있습니다. Link