html - HTML 中的多个 100% 高度 block

Question

我理解为了使用基于百分比的高度，父元素必须设置为固定高度？例如 500 像素。

我正在构建一个网格，其中有一个 div 层次结构。 parent为固定高度500px，children为百分比高度，各为33.333%。然后这些 child 有一组 child ，我想给每个 child 的高度百分比为其 parent 的 100%。

有人知道解决这个问题的方法吗？

Answer 1

Any one know a way around this?

另一种方法是将 flexbox 与 flex-grow 一起使用，这样 child 就可以长大以填充他们的 parent

* {margin:0;}
section {
  height: 100vh;
}
section,div {
  display: flex;
  flex-direction: column;
}
div,p {
  flex-grow: 1;
  flex-basis: 0;
}
p {
  background: #eee;
}
div:nth-child(even) p {
  background: #ccc;
}

<section>
  <div>
    <p>text</p>
  </div>
  <div>
    <p>text</p>
  </div>
  <div>
    <p>text</p>
  </div>
</section>