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

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>

这个

标签所占用的空间太大了。我希望它仅占用其内容不会溢出的最大空间。

我该如何做到这一点？

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

- Jeroen

---

“基于规范的解决方案” - 您需要任何特定版本/草案吗？ - Mark Schultheiss

不，其实不需要，只要它已经确定下来了。我所指的是不要进行特定于供应商的实验。 - Jeroen

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>

- BoltClock

Answer 2

您需要使用grid-template-rows来声明每行占据的区域，其中：

• minmax(10px, auto)定义了标题行的最小高度为10像素，最大高度可以随着内容动态增加而扩展。
• 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>

- user7207170