CSS/Bootstrap：如何在 cols 全高范围内拉伸容器？答案

【问题标题】：CSS/Bootstrap: How to stretch containers within cols full-height?CSS/Bootstrap：如何在 cols 全高范围内拉伸容器？
【发布时间】：2015-12-22 06:26:21
【问题描述】：

我正在使用简单的 Bootstrap-Grid：一行，两个 col-md-6-columns。在每一列中我都有一个容器class="box"，它应该使用height of 100%。

我尝试了不同的方法，例如模拟一个表和表列，但选择了 Bootstrap 推荐的 .row-eq-height-class。

强制col-md-6 中的box 伸展到全高的常用方法是什么？

HTML：

<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="box" style="background: red">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            
        </div>
    </div>
    <div class="col-md-6">
        <div class="box" style="background: green">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>
</div>

CSS：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.col-md-6 {
  background: yellow; /* to show the left space */
}

.box {
  height: 100%;
}

直播：

http://jsfiddle.net/cmbe4h1h/

编辑：我想避免用额外的容器包装 HTML（就像在许多 position: relative/absolute-tutorials 中一样）。

提前致谢！

【问题讨论】：

@ManojKumar 在示例（小提琴）中，红色容器高于绿色容器。也许您需要减小浏览器宽度，才能看到问题。
你的意思是内容更高吧？

标签： html twitter-bootstrap css

【解决方案1】：

CSS solution。删除了 col-md-6 类的填充。还将您的 bg 内联样式移至外部容器，而不是 box 类。

More Reading

【讨论】：

【解决方案2】：

我没有为我的案例找到合适的 CSS 解决方案并切换到

JS (jQuery)：

$('.sameHeightWrapper').each(function() {
    var highestContainer = 0;
    $('.sameHeightContainer', this).each(function() {
        if($(this).height() > highestContainer) {
            highestContainer = $(this).height();
        }
    });
    $('.sameHeightContainer', this).height(highestContainer);
});

HTML：

<div class="sameHeightWrapper">
    <div class="sameHeightContainer c1">
        Container 1<br/>
        ...
    </div>
    <div class="sameHeightContainer c2">
        Container 2<br/>
        ...
    </div>   
    <div class="sameHeightContainer c3">
        Container 3<br/>
        Container 3<br/>
        ...
    </div>   
</div>

试试看：jsfiddle.net

【讨论】：