CSS Grid中的行应该占用剩余空间

Question

我有一个非常简单的CSS网格,只有两行:a header和a 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.我希望它最多占用尽可能多的空间,使其内容不会溢出.

我怎样才能做到这一点？

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

Answer 1

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

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-rowswhich来声明每行占用的区域，其中

• minmax(10px, auto)定义标题行的最小高度为 10px，最大高度可以随着内容的增加而动态扩展。
• 1fr 是内容行的整个剩余空间的 1 分数。

如果您不想设置最小高度，也可以使用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>