Bootstrap网格，内容高度填充

Question

我想知道如何在Bootstrap 3行网格布局中实现内容行填充屏幕大小（页眉和页脚是固定高度）。

这是我想要实现的图像：

Answer 1

我会将页眉和页脚嵌套在内容div中，并将此内容div设置为100％高度，顶部和底部填充等于页眉/页脚的高度。

示例1：http://jsfiddle.net/52VtD/6841/

示例2（使用Bootstrap列）：http://jsfiddle.net/52VtD/6842/

示例3（带有可滚动的内部容器）：http://jsfiddle.net/52VtD/6843/

<强> HTML

html, body {
    height: 100%;
}

.content {
    height: 100%;
    position: relative;
    padding: 40px 0;
    background: yellow;
}

.header {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    background: black;
}

.footer {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background: black;
}