保持列填充的同等高度的列与Bootstrap 3

我有一个常规的Bootstrap 3 CSS设置。我想将相同的高度应用于一行内的列，并一直在使用display:table和display:table-cell。此方法可行，但它自然似乎在内容较少的列上应用垂直填充。保持列填充的同等高度的列与Bootstrap 3

拿这个HTML例如：

<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，里面有红色的背景并不反映本，因为第二列有底部填充，我不能删除。

看到这个捣鼓一个例子：http://jsfiddle.net/cyan8fjz/

是否有解决方案，让我.block使用全height:100%？理想情况下，我不想绝对定位.block，因为列上的左侧和右侧填充（可能会在不同的屏幕分辨率下进行更改）。

注意我没有在上面的示例中包含Bootstrap CSS，但我已经在小提琴中了。假设它是相关的并且包含在所有示例中。

来源

2014-10-01 Coop

你可以像这样使用'padding-bottom: 1000em; margin-bottom: -1000em;把戏。

下面是一个例子：Link

来源

2014-10-01 16:29:28

超！允许我在'.block'中应用更多的样式，例如填充，而不会破坏任何内容。谢谢。 – Coop 2014-10-01 16:39:20

保持列填充的同等高度的列与Bootstrap 3

回答

相关问题