javascript - 如何在 3 个元素上划分一个元素的高度？

Question

我有以下 html 代码:

body, html {
    height: 100%;
}

.parent {
    width: 15%;
    height: -webkit-fill-available
}

.child {
    height: 33.33%
}

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我尝试了 display:table 用于“parent”和 display:table-row 用于“child”，但它没有用。

有可能吗？

Answer 1

我建议使用 flexbox，并且不要忘记将 .parent 设置为 height:100%。

使用 flexbox 的主要优点:

• 你不必处理溢出问题，比如一行中有更多内容无法容纳整个容器高度的 1/3，它会自动扩展行，并将所有剩余的可用空间仍将均匀分布。
• 您无需更改 CSS 即可轻松添加或删除行，它们将根据数量或子 div 均匀分布。
• 如果你需要一行或多行变短或变高，你可以使用 flex 或 flex-grow 或 flex-basis进行相应调整。
• 此外，如果您还没有听说过 flexbox，一旦进入 flexbox 世界，您就会惊叹它的强大。

html,
body {
  height: 100%;
  margin: 0;
}

.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>