CSS Grid中的行应该占用剩余空间[重复]答案

【问题标题】：Row in CSS Grid should take up remaining space [duplicate]CSS Grid中的行应该占用剩余空间[重复]
【发布时间】：2017-12-26 15:53:51
【问题描述】：

我有一个非常简单的 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 占用了太多空间。我希望它最多占用所需的空间，使其内容不会溢出。

我该怎么做？

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

【问题讨论】：

spec-based solution - 任何您想要的特定版本/草稿？
不，不是，只要最终确定。我的意思只是没有特定于供应商的实验。

标签： css css-grid

【解决方案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>

【讨论】：

【解决方案2】：

你需要使用grid-template-rows来声明每一行占用的区域在哪里

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>

【讨论】：