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>