展开div以填充浏览器窗口和中心内容的其余部分

Question

我正在尝试为我正在处理的网站实现特定的布局，但我不确定如何处理它。布局如下所示：

标题没什么特别之处。页脚有position: fixed和bottom: 0px。主体内容需要在从标题的底部到页脚顶部的空间内垂直居中。如果调整窗口高度，则身体内容应保持在这两个点之间的中心。另请注意，该网站将具有响应性，但仅从960px到大约1600px（因此它的最小宽度为960px）。

关于如何实现这一点的唯一想法是让包含主体内容的div以某种方式自动扩展到从头部底部到浏览器窗口底部的整个高度（然后在以下处添加一些填充要记录页脚的底部，然后在此包含div上使用display: table，并在子div上使用display: table-cell和vertical-align: middle。

我还有其他方法（最好是仅限CSS）吗？如果没有，我怎样才能将主体内容的包含div扩展为从标题底部到浏览器窗口底部的整个高度？

Answer 1

对于具有固定高度的标题，这是一种解决方案。

您的HTML需要具有以下模式：

<div class="header">Header</div>
<div class="main-wrap">
    <div class="container">
        <div class="content">Content...</div>
    </div>
</div>
<div class="footer">Footer</div>

和CSS：

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.header {
    height: 50px;
    background-color: beige;
}
.main-wrap {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
    background-color: silver;
    overflow: auto;
}
.container {
    display: table;
    height: 100%;
    width: 100%;
}
.content {
    border: 1px solid blue;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}
.footer {
    height: 50px;
    width: 100%;
    background-color: lightblue;
    position: fixed;
    bottom: 0;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/aGTKs/

可以将其调整为灵活高度的标题。

.main-wrap容器定义页眉和页脚之间的空格。

.container区块使用display: table并从.main-wrap继承高度。

最后，.content使用display: table-cell，允许您使用vertical-align: middle（默认值）垂直居中。

您需要将body和html的高度设置为100％才能捕获视口的高度。

Answer 2

您可以通过\today-2 days来破解它！