CSS网格中的行应占用剩余空间 [英] Row in CSS Grid should take up remaining space

问题描述

我有一个非常简单的CSS网格，只有两行: header 和 div .我希望第二行占用所有剩余的视口高度.这是一个复制品:

I have a very simple CSS grid with just two rows: a header and a div. I want the second row to take up all remaining view port height. Here's a repro:

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body {
  display: grid;
  height: 100vh;
  width: 100vw;
}

header {
  border: 1px solid red;
}

.content {
  border: 1px solid blue;
}

<header>
  <h1>IMG + Some header text</h1>
</header>

<div class="content">
  Here will be dynamic content (a grid on its own).
  Should take all the remaining height.
</div>

这会为 header 使用过多的空间.我希望它最多占用所需的空间，以使其内容不会溢出.

This uses way too much space for the header. I want it to take up at most as much space as needed for its content not to overflow.

我该怎么做?

我对任何基于规范的解决方案都感兴趣，尽管实际上我希望至少能够在Chrome(或Firefox)最新的稳定版本中使用它.

I'm interested about any spec-based solution, though practically I would like to be able to use it at least in Chrome (or Firefox) latest stable build.

推荐答案

为标题行和 1fr 指定自动大小调整，以将所有剩余空间分配给内容行.

Specify auto sizing for the header row and 1fr to allocate all the remaining space to the content row.

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  width: 100vw;
}

header {
  border: 1px solid red;
}

.content {
  border: 1px solid blue;
}

<header>
  <h1>IMG + Some header text</h1>
</header>

<div class="content">
  Here will be dynamic content (a grid on its own).
  Should take all the remaining height.
</div>

这篇关于CSS网格中的行应占用剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！