css - 展开 div 以填充浏览器窗口的其余部分并居中内容

Question

我正在尝试为我正在处理的网站实现特定布局，但我不确定该怎么做。布局将如下所示:

标题没有什么特别之处。页脚有 position: fixed 和 bottom: 0px。主体内容需要在从页眉底部到页脚顶部的空间内垂直居中。如果调整了窗口高度，正文内容应保持在这两点之间的中心位置。另请注意，该网站将响应，但只能从 960 像素到大约 1600 像素(因此它的最小宽度将永远是 960 像素)。

关于如何实现这一点，我唯一的想法是让包含正文内容的 div 以某种方式自动扩展到始终是从标题底部向下到浏览器窗口底部的完整高度(然后在底部占页脚)，然后在这个包含 div 上使用 display: table，并使用 display: table-cell 和 vertical-align: middle 在子 div 上。

有没有其他方法(最好是纯 CSS)我可以这样做？如果不是，我怎样才能让正文内容的包含 div 扩展到始终是从标题底部向下到浏览器窗口底部的完整高度？

Answer 1

这是一个解决方案，用于固定高度的 header 。

您的 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 block 使用display: table 并从.main-wrap 继承高度。

最后，.content 使用display: table-cell，它允许你使用vertical-align: middle(默认值)来垂直居中内容。

您需要将body和html的高度设置为100%，以捕获视口(viewport)的高度。