如何使CSS Grid的最后一行占用剩余空间

gfpacheco

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

像这样:

在此处输入图片说明

有什么办法吗?

服务天堂

您可以为此使用flex。

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

之后,我们将为flex-shrink: 1;每个孩子使用该属性这样,它将仅占用所需/指定的空间。最后一个孩子的窍门是使用该属性,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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档