容器中的HTML 3行（div），高度为33.333333％，响应容器高度

Question

我正在寻找一种方法来安排3个div，它们将占据容器高度的100％。

示例标记

<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

所以这意味着，例如，如果容器的高度为300px，那么每个项目的高度应为100px，或者应该具有33.33333％的父级高度。

我有一些想法，主要是使用js并在那里进行所有数学运算，但如果有一个纯粹的CSS解决方案会很棒。

Answer 1

.container{
  height: 300px;
  width: 100%
}

.container [class^=item-]{
  width: 100%;
  height: 33.33333%
}

<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

Answer 2

我认为您正在寻找父母的宽度/高度百分比。您总是可以在子div中使用height = 33％来执行此操作。