html - 如何使面板与父div保持全高？

Question

我在具有以下 HTML 的表单上使用 Bootstrap 3，其中包含 4 个面板，其结构与下面的示例相同。

我的问题是每个面板包含不同的内容，因此显示的高度也不同。我尝试向它们添加 style="height:100%" 但这并没有改变任何东西。

有人可以告诉我如何将它们设置为始终采用完整高度，而与内容无关？基本上，我想要实现的是让所有 4 个面板的高度与它们在一行中出现的高度相同 - 唯一不同的是带有可变文本的段落，其他一切都相同对于所有面板，每个面板都采用相同的高度。

示例面板:

<form role="form">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="thumbnail thumbnail-hover">
                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
                    <div class="caption">
                        <h3 class="text-primary">Title</h3>
                        <p>Some variable text</p>
                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>
                    </div>
            </div>
        </div>
    </div>
    // ...same structure for other panels...
</form>

Answer 1

这是我所做的:http://jsfiddle.net/o7p1jtjv/1/

通过将 .row 设置为 overflow hidden ，然后为每列 div 指定一个等于 的 margin-bottom padding-bottom，您强制它们都大于 .row，但不会显示任何溢出的内容(额外的 div 空间)。

为了进行比较，这里是一个没有额外规则的:http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <p>text</p>
        </div>
        <div class="col-xs-4">
            <p>text</p>
        </div>
        <div class="col-xs-4">
            <p>text</p>
        </div>
    </div>
</div>

---

.row
{
    overflow: hidden;
}

.row > div
{
    background: red;
    margin-bottom: -999999px;
    padding-bottom: 999999px;
}