高度为 33.333333% 的容器中的 HTML 3 行 (div)，响应于容器高度

Question

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

示例标记

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

这意味着，例如，如果容器的高度为 300 像素，则每个元素的高度应为 100 像素或父项的高度应为 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>