CSS 网格布局：三行网格

Question

我很好奇是否可以使用网格布局 CSS 来创建这样的东西：

************************
*        row #1        *
************************
*                      *
*                      *
*        row #2        *
*                      *
*                      *
************************
*        row #3        *
************************

所以网格必须填满整个身体高度。并且对其他元素也有一些限制：

• #1 行与网格顶部对齐，可以更改它的 高度（但有一个最大高度值）
• 第 3 行与 底部并且可以改变它的高度（也有一个最大高度值）
• 所以第 2 行必须填满网格中的所有剩余空间。
• 网格容器不应溢出 html 正文。

我有一个例子：3 row grid layout。 我也可以使用绝对位置 like this 制作所有内容，但没有任何用处，因为我可以自动计算第 2 行的边距，而无需任何命令式 js 代码。

Answer 1

我看到原始问题被标记为已回答，但由于原始问题包含尝试使用 CSS 网格布局模块来解决问题，我想我会用一些使用更新标准的解决方案来补充答案。

使用弹性盒

首先，这种布局很容易使用 flexbox。 flex-grow 属性允许您以这种方式定义填充剩余空间的元素。 JSBin example using flexbox here

注意： 在快速演示中没有使用所有前缀（例如，针对 IE10 等），但如果您使用诸如 autoprefixer 之类的东西，这有点微不足道。另外，请注意与 vh units in iOS 和 min-height flexbox columns in IE 等相关的错误。

使用网格布局

注意：此演示仅适用于编写答案时的 Chrome Canary！

网格布局正在加快步伐，规范已经稳定了一点。 Chrome Canary 有一个非常成熟的实现，WebKit nightly builds 也是如此。

网格布局具有与 flexbox 相同类型的灵活大小，而是将布局机制移动到容器元素。 JSBin demo – 请记住，Chrome Canary 仅在撰写本文时。 （它也可以在 WebKit nightlies 中使用正确的前缀。）

基本上，整个事情归结为以下几行：

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  height: 100vh;
}

上面的意思是“使用body元素作为网格容器，将item按源顺序放置在其中，在100%宽的单列中，根据内容调整第一行和第三行的大小，中间的取把剩下的所有空间“。我们不需要专门将项目放置在网格内：它们会自动放置——如果我们愿意，我们可以更改顺序等。 Grid Layout 可以做很多更高级的事情！

大多数浏览器供应商都在努力完成他们的第一个网格实现，因此开始使用它既有趣又值得。 :-) 在那之前，flexbox 版本会为您提供很好的浏览器支持。

Answer 2

您可以使用display:table 属性See Spec 和Compatibility 来做到这一点

Working Demo

CSS

#container {
    display:table;
}

#head, #content, #foot {
    display:table-row;
}

编辑：

Updated Fiddle

在table-row 内添加div 以防止overflow

Answer 3

像这样设置百分比高度怎么样：

.head{
   height:10%;
   max-height: /*max height allowed*/;
}

.content{
   height:80%;
   max-height: /*max height allowed*/;
}

.foot{
   height:10%;
   max-height: /*max height allowed*/;
}