0

我正在尝试为我正在开发的网站实现特定的布局，但我不知道如何去做。布局将如下所示：

在此处输入图像描述

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

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

还有其他（最好是纯 CSS）方法我可以做到这一点吗？如果没有，我怎样才能让正文内容的包含 div 扩展为始终是从标题底部到浏览器窗口底部的全高？

4

2 回答 2

3

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

您的 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。

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

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

于 2013-09-26T00:51:48.057 回答
0

你可以通过这样做来破解它{position: absolute; bottom: 0}！

于 2020-09-01T23:28:37.743 回答