将3div(高度100%)放置在容器div(最低高度400 in )中。

Question

我试着把三个带内容的div放在一个最小高度的容器div中，但是它不想工作。我希望正确的两个div具有与第一个相同的高度，并且取决于内容的长度，因此有色字段具有相同的高度。-lg-4类是自举的.任何建议都很受欢迎！

html：

<div class="blokken row">
            <div class="col-lg-4 blok blok1">
             <h2>title</h2><p>Long text</p>
            </div>
            <div class="col-lg-4 blok blok2">
             <h2>Title</h2><p>Short text</p>
            </div>
            <div class="col-lg-4 blok blok3">
             <h2>Title</h2><p>short text</p>
            </div>
</div>  

css：

.blokken {min-height: 400px;}
.blok {padding: 40px;height: 100%}
.blok1{background: #ff9aa4;}
.blok2{background: #9aa8ff;}
.blok3{background: #b4ff9a;}

编辑固定IT

所有给定的解决方案都不能很好地处理引导响应类。它的工作方式并不完全相同，但我通过在.blokken (容器)div中放置带有三种颜色的bg来修复它：

.blokken {
min-height: 400px;
background-image: url("../img/bg-content.jpg");
background-repeat: repeat-y;
background-size: 100%;
}    

谢谢大家的帮助！

Answer 1

您遗漏了用于display: inline-block类的.blok，并为父块指定了width或display: block，下面是一个小提琴

更新而不是使用display:inline-block，使用display: table-cell;并修复blok 的宽度，例如、width: 33%;和float:none;。看一下最新的小提琴。

http://jsfiddle.net/wkbu56ju/2/