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

我正试图为我正在开发的网站实现一个特定的布局，但我不确定如何实现它。布局将如下所示：

标题没有什么特别之处。页脚有

位置：fixed

和

底部：0px

。主体内容需要在从页眉底部到页脚顶部的空间内垂直居中。如果调整了车窗高度，车身内容物应保持在这两点之间的中心位置。还要注意的是，该网站将是响应性的，但只有从960px到大约1600px（所以它的最小宽度将是960px）

关于如何实现这一点，我唯一的想法是让包含正文内容的div以某种方式自动扩展，始终为从页眉底部到浏览器窗口底部的全高（然后在底部添加一些填充以说明页脚），然后在此包含的div上使用

display:table

，并在子div上使用

display:table cell

和

vertical align:middle

---

有没有其他（最好是CSS）的方法可以让我做到这一点？如果没有，如何使正文内容的包含div展开始终为从页眉底部到浏览器窗口底部的全高？

对于具有固定高度的页眉，这里有一个解决方案

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

请参见演示：

可以将其适应于高度灵活的收割台

.main wrap

容器定义页眉和页脚之间的空间

.container

块使用

display:table

并从

.main wrap

继承高度

最后，

.content

使用

显示：表格单元格

，允许您使用

垂直对齐：中间

（默认值）将内容垂直居中

---

您需要将

body

和

html

的高度设置为100%，以捕获视图端口的高度。

对于具有固定高度的标题，这里有一个解决方案

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

请参见演示：

可以将其适应于高度灵活的收割台

.main wrap

容器定义页眉和页脚之间的空间

.container

块使用

display:table

并从

.main wrap

继承高度

最后，

.content

使用

显示：表格单元格

，允许您使用

垂直对齐：中间

（默认值）将内容垂直居中

---

您需要将

body

和

html

的高度设置为100%才能捕获视图端口的高度。

您可以通过执行

{position:absolute；bottom:0}

来破解它

您可以通过执行

{position:absolute；bottom:0}

来破解它

您提出的解决方案将起作用，CSS表格单元格是一个好主意。如果窗口高度变得足够小，并且内容开始溢出，您需要在内容块上设置一个滚动条。页眉是否与页脚相似？是的，肯定需要这样做。我不确定我是否可以只用CSS实现这一点，或者是否需要一些JavaScript。我也不知道如何让正文内容的包含div从标题扩展到浏览器窗口底部的全高，以便使用

display:table

和

display:table cell

。您能谈谈标题、固定高度、，是否固定位置？在OP中添加了一些额外的细节。标题只是静态定位。如果某个特定的解决方案需要固定高度才能工作，这可能是可能的，但如果不需要固定高度则更好。这被称为“粘性页脚”（以便您知道谷歌搜索什么）。您提出的解决方案将工作，CSS表格单元格是一个好主意。如果窗口高度变得足够小，并且内容开始溢出，您需要在内容块上设置一个滚动条。页眉是否与页脚相似？是的，肯定需要这样做。我不确定我是否可以只用CSS实现这一点，或者是否需要一些JavaScript。我也不知道如何让正文内容的包含div从标题扩展到浏览器窗口底部的全高，以便使用

display:table

和

display:table cell

。您能谈谈标题、固定高度、，是否固定位置？在OP中添加了一些额外的细节。标题只是静态定位。如果某个特定的解决方案需要固定高度才能工作，这可能是可能的，但如果不需要固定高度就更好了。在我尝试实施此解决方案之前，这被称为“粘性页脚”（这样你就知道谷歌应该做什么），有没有办法使它在浏览器窗口的高度不足以容纳所有正文内容时显示滚动条？这里有一个对JSFIDLE的更新，其中包含一些lorem ipsum文本，您可以看到如果您减小结果窗口的大小，它实际上无法按需要工作：添加

溢出：自动
到
。主换行
，我更新了帖子和提琴。其中一个问题是，有可能使窗口的高度足够小，以至于内容完全隐藏在页脚后面。我尝试了一些变化，但无法解决这个问题。目前，这可能是我能做的最好的了。当我想到它的时候，如果你有一个固定高度的固定位置的页脚，你总是可以把窗口高度缩小到页脚的高度，然后你就失去了你的内容；如果不使用一些JavaScript/jQuery方法或媒体查询来检查一个小窗口，我看不到防止这种情况发生的方法