Div结构的百分比高度

Question

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

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

P.S。我使用的是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

来执行此操作

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;