CSS 网格中的行应占用剩余 space

Question

我有一个非常简单的 CSS 网格，只有两行：header 和 div。我希望第二行占据所有剩余的视口高度。这是一个重现：

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，这 space 用得太多了。我希望它最多占用 space 以使其内容不会溢出。

我该怎么做？

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

Answer 1

为 header 行指定自动调整大小，1fr 以将所有剩余的 space 分配给内容行。

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>

Answer 2

你需要利用grid-template-rows来声明每行所占的区域其中

minmax(10px, auto)定义最小高度为10px，最大高度可以随着内容的增加而动态扩展header行。
1fr 是 内容行 .

您也可以使用 auto 代替 minmax 如果您不想设置最小高度。

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: minmax(1px, 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 网格中的行应占用剩余 space

Row in CSS Grid should take up remaining space

css

css-grid