使用百分比高度的Div结构

Question

我正在尝试在页面上构建特定的结构。 主div(.row)高度为400px，有两个子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>

- Crabar

---

请发布你目前为止的HTML/CSS。 - Asons

Answer 1

由于.row的高度固定为400像素，因此您可以使其内部具有相同的高度：

.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的高度发生变化，内部也应该适应。

- Hussain Almomen

Answer 2

您可以使用Flexbox，或结合Bootstrap和FlexboxDEMO来完成这个操作。

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>

- Nenad Vracar

---

这个主题中有一个对我有效的更短的答案。您能否解释一下使用flexbox的一般好处或仅在我的情况下？您的片段看起来也正是我想要的。 - Crabar

@Crabar 那我建议您更新您的问题，明确说明这一点。 - Asons

@Crabar Flexbox是一种新的现代布局方式，就这么简单，不会遇到浮动和内联块等旧问题。 - Asons

@Crabar 此外，flexbox 可以在特定情况下为您提供许多 Bootstrap 所具有的东西，而无需在每个其他元素上使用库和一堆类。 - Asons

是的...谢谢。我会尝试两种方法。不幸的是，我不能接受两个答案。所以我会投票给两个并接受其中一个。 - Crabar