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使用太多空间。我希望它最多占用尽可能多的空间，使其内容不会溢出。

我该怎么做？

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

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您需要使用grid-template-rows来表示每行占用的区域其中

minmax（10px，auto）定义最小高度为10px，最大高度可以随着标题行动态增加而展开。
1fr是内容行

的整个剩余空间的一部分。

如果您不想要自动而非 minmax ，您也可以使用 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 Grid中的行应该占用剩余空间

2 个答案: