如何使CSS Grid的最后一行占用剩余空间 [英] How to make CSS Grid last row to take up remaining space

问题描述

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

I have a grid with variable number of rows and I want the last one to be 1fr height.

类似这样的东西：

有什么办法吗？

推荐答案

您可以为此使用flex。

you could use flex for this.

Te父容器应具有显示：flex; 。我们想垂直使用它，因此我们将像下面的那样改变弯曲方向 flex-direction：column; 。

Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.

在此之后，我们将为每个孩子使用属性 flex-shrink：1; 。这样，它将仅占用所需/指定的空间。最后一个孩子的窍门是使用属性 flex-grow：1; 以便占用可用空间。

After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.

请参见以下代码段：

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

这篇关于如何使CSS Grid的最后一行占用剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！