Div表格布局 - 单元格高度相同

Question

我在Bootstrap中进行布局，我的css如下（用于调试的背景颜色集）：

<div class="row" style="display: table; width: 100%; height: 100%; background-color: red;">
    <div class="col-md-8" style="display: table-cell; height: 100%; background-color: blue;">
        <textarea id="events-text" class="form-control" style="height: 100%;"></textarea>
    </div>
    <div class="col-md-4" style="display: table-cell;">
        <div class="btn-group-vertical" style="width: 100%;">
            {% for category in categories %}
            <button class="btn btn-default btn-xs category-select">
               {{ category.name }}
            </button>
            {% endfor %}
        </div>
    </div>
</div>

效果是：

我希望textarea和右边的按钮一样高。问题是，它的表格单元格没有达到全高，所以也没有去textarea。如何让这个表格单元格与右边的表格单元格相同？

Answer 1

我认为您需要移除table-cell上的浮动（浮动：左侧是由Bootstrap添加的）..

http://www.bootply.com/116934