Div结构的百分比高度

Question

我正在尝试在页面上构建某种结构。

高度为400px的主div（.row），两个子div（列col-md-6）和五个内部div：两个具有父高度的50％，三个具有父高度的33％。 我不知道如何实现这一点。 你能推荐最好的解决方案吗？

PS我正在使用bootstrap3。

更新：添加了代码。

<div class="row">
  <div class="col-md-6">
    <div id="ember828" class="ember-view bar-category-box">
    </div>
    <div id="ember829" class="ember-view bar-category-box">
    </div>
  </div>
  <div class="col-md-6">
    <div id="ember830" class="ember-view bar-category-box">
    </div>
    <div id="ember831" class="ember-view bar-category-box">
    </div>
    <div id="ember832" class="ember-view bar-category-box">
    </div>
  </div>
</div>

Answer 1

由于.row固定在400px高度，你可以在同一高度内给出什么：

.row > .col-md-6 {
    height: 100%;
}

然后对于.col-md-6里面的每个div你给出你需要的高度：

.row > .col-md-6 .half {
    height: 50%;
}
.row > .col-md-6 .third {
    height: 33.33%;
}

这应该工作。 即使父.row div高度发生变化，内部也应该适应。

Answer 2

您可以使用Flexbox或bootstrap和flexbox DEMO组合来完成此操作

 body, html { margin: 0; padding: 0; } .container { height: 400px; width: 100%; box-sizing: border-box; display: flex; border: 1px solid #73FCD6; padding: 10px; } .left, .right { display: flex; flex-direction: column; flex: 1; } .box { border: 1px solid #965504; flex: 1; margin: 5px; display: flex; align-items: center; justify-content: center; } 

 <div class="container"> <div class="left"> <div class="box">Content</div> <div class="box">Content</div> </div> <div class="right"> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> </div> </div>