javascript - 多个div跨越父级的高度

Question

有什么好方法可以让多个 div 跨越其包含 固定高度 的父级的高度？

请看下图:

这是建议的标记:

<div class="parent">

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

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

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

</div>

子 div 应该总是填满父 div 的整个高度，不管它们有多少，但它们的高度不需要相等并且应该根据它们的内容改变。

因此，如果有很多内容，它会变大，其余内容会相应调整。

我已经使用表格完成了此操作，但我认为可能有一些简单的方法可以只使用 div，这将是有利的，因为它们对于响应式布局更加通用。

是否有纯 CSS 解决方案？

Answer 1

假设您有这个:

body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}

<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>

---

为了达到要求，可以使用flexbox。

在你的父元素中使用:

• display: flex;使其成为 flex 容器。
• flex-direction: column;改变主轴。

在你的 child 元素中使用:

• flex: 1;在 flex 元素之间分配可用空间。

flex: <positive-number> Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

来源 W3C .

---

body {
  margin: 0;
}
.parent {
  background-color: peachpuff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.child {
  flex: 1;
}
.child:first-child {
  background-color: chartreuse;
}
.child:nth-child(2) {
  background-color: dodgerblue;
}
.child:last-child {
  background-color: coral;
}

<div class="parent">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <div class="child">
    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.
  </div>

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
  </div>

</div>

---

jsFiddle