Question

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

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

因此网格必须填满整个身高。其他元素也有一些限制：

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

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

Answer 1

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

使用flexbox

首先，使用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每晚构建都是如此。

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

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

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

上述方法＆＃34;将body元素用作网格容器，按源顺序将项目放在其中，在100％宽的单个列中，根据内容调整第一行和第三行的大小，以及中间的一个占据了剩下的所有空间＆＃34;。我们不需要专门将项目放置在网格内：它们将自动放置自己 - 如果我们想要，我们可以更改订单等。网格布局可以做更多高级的事情！

大多数浏览器供应商正在努力完成他们的第一个网格实施，所以它很有趣＆amp;值得开始玩它。 :-) 在此之前，flexbox版本可以为您提供非常好的浏览器支持。

Answer 2

您可以使用display:table属性See Spec和Compatibility

执行此操作

<强> Working Demo

CSS

#container {
    display:table;
}

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

修改

<强> Updated Fiddle

在div内添加table-row以阻止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*/;
}

CSS网格布局：三行网格

3 个答案:

使用flexbox

使用网格布局