Question

我正在尝试将粘性页脚和/标题合并到每个页面上的内容波动的网站上，有些页面只有一段或更少的文本，有些页面有多个段落。

我喜欢白色背景div以填充页眉和页脚之间100％的页面，这样无论页面中有多少内容，或者查看者的分辨率是多大的白色div将垂直100％（减去页眉和页脚。）

我一直在修补这段代码：

#middle-cell {
  vertical-align:top;
  height: 100%
}

这是我目前所拥有的my fiddle。

但到目前为止，我还没有能够让它发挥作用。

Answer 1

CSS没有直接的方法来自动填充容器的剩余高度（不包括一些不完全支持的flexbox功能）。

如果你有一个固定高度的标题，内容的基于百分比的高度将永远无法正常工作，因为固定高度实际上是每个尺寸的视口的不同百分比。

解决方案是添加一个包装页面内容的新position: absolute div，当您将所有四个边连接到所需位置时，它就像一个新的“视口”。 / p>

如果您的标题是height: 60px，那么您可以像这样附加新包装的边缘：

有什么好处的是浏览器确实知道如何计算这个div的高度，所以如果你的div.content内部设置为height: 100%则100％引用到标题后剩余屏幕空间的高度。

如果div.content包含太多文本/媒体，并且比包装器长，只需在包装器div上使用overflow-y: scroll即可滚动内容。