CSS网格布局：三行网格

问题描述：

我很好奇，可以使用网格布局CSS创建这样的事情：

I'm curious is it possible to use the Grid Layout CSS to create such thing:

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

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

So the grid must fill the full body height. And there's also some restrictions for other elements:

行＃1与网格顶部对齐，可以更改
高度（但有一个最大高度值）

第3行与
底部对齐，可以更改其高度（也有一个最大高度值） / li>
因此，第2行必须填满网格中的所有剩余空间。

网格容器不应溢出html体。

我有一个例子： 3行网格布局。
我也可以使绝对位置的一切喜欢这个，但没有用，因为我可以自动

There's an example what I achieved: 3 row grid layout. I also can make everything with absolute position like this but there's no use because I can automatically calculate the row #2 margins without any imperative js code.

答

可以使用 display：表属性请参阅规格和兼容性

工作演示

Working Demo

CSS

#container {
    display:table;
}

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

编辑：

更新小提琴

Updated Fiddle

在中添加 div 表格行以防止 overflow

相关推荐