2

我有一个常规的 Bootstrap 3 CSS 设置。我想对一行内的列应用相同的高度，并且一直在研究使用display:tableand display:table-cell。此方法有效，但它似乎自然地在内容较少的列上应用垂直填充。

以这个 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，但我有。假设它是相关的并包含在所有示例中。

4

1 回答 1

2

你可以使用这样的 'padding-bottom: 1000em; margin-bottom: -1000em;技巧。

这是一个例子：链接

于 2014-10-01T16:29:28.207 回答