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

【问题标题】：Expand div to fill rest of browser window and center content展开 div 以填充浏览器窗口的其余部分并居中内容
【发布时间】：2020-09-02 11:19:57
【问题描述】：

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

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

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

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

【问题讨论】：

您提出的解决方案可行，CSS 表格单元格是个好主意。如果窗口高度变得足够小并且内容开始溢出会发生什么，您需要在内容块上添加一个滚动条。页眉是否与页脚一样固定？
是的，这绝对是需要的。不确定我是否可以仅使用 CSS 或是否需要一些 JavaScript 来实现这一点。我也不确定如何让包含正文内容的 div 扩展到从标题到浏览器窗口底部的完整高度，以便使用 display: table 和 display: table-cell。
你能说一下header，固定高度，固定位置吗？
为 OP 添加了一些额外的细节。标题只是静态定位。如果需要固定高度才能使特定解决方案起作用，这可能是可能的，但如果不必固定高度会更好。
这被称为“粘性页脚”（这样你就知道要谷歌了）

标签： css

【解决方案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%才能捕捉视口的高度。

【讨论】：

在我尝试实现这个解决方案之前，有没有办法让它在浏览器窗口的高度不足以容纳所有正文内容时出现滚动条？这是对您的 jsFiddle 的更新，其中包含一些 lorem ipsum 文本，您可以查看是否减小了 Result 窗口的大小，它并没有真正按需要工作：jsfiddle.net/aGTKs/3
添加overflow: auto到.main-wrap，我更新了帖子和小提琴。
其中一个问题是可以将窗口高度做得足够小，以使内容完全隐藏在页脚后面。我尝试了一些变体，但无法解决该问题。目前，这可能是我能做的最好的了。当我想到它时，如果你有一个固定高度的固定位置页脚，你总是可以将窗口高度缩小到页脚的高度，然后你的内容就会松动；如果不使用一些 JavaScript/jQuery 方法或媒体查询来检查小窗口大小，我看不到防止这种情况发生的方法。

【解决方案2】：

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

【讨论】：