css - 如何让 CSS Grid 最后一行占用剩余空间

Question

我有一个行数可变的网格，我希望最后一行的高度为 1fr。

像这样:

有什么办法吗？

Answer 1

你可以为此使用 flex。

父容器应该有display: flex;。我们想垂直使用它，所以我们将像这样更改 flex 方向 flex-direction: column;。

在此之后，我们将为每个 child 使用属性 flex-shrink: 1;。这样，它将只占用所需/指定的空间。最后一个 child 的技巧是使用属性 flex-grow: 1; 所以它会占用可用空间。

请看下面的片段:

html, body {
  height: 100%;
}

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

.fill-height > div {
  border: 1px solid red;
  min-height:2em;
  flex-shrink: 1;
}

.fill-height > div:last-child {
  flex-grow: 1;
}

<section class="fill-height">
  <div>
    row 1 (shrink)
  </div>
  <div>
    row 2 (shrink)
  </div>
  <div>
    row 3 (grow)
  </div>
</section>

链接到 JsFiddle