静态页脚，附加和缩放重叠

Question

客户已要求我创建一个内容区域与页脚重叠的站点。然而，他们也希望页脚附加到视口的底部，我已经完成了，但似乎我找不到垂直拉伸内容的好方法，以便在浏览器调整大小时保持重叠。 / p>

我已经创建了一个图表来帮助解释http://www.squaresphere.co.uk/images/footer-diagram.png

理想情况下，我需要一种计算内容高度和拉伸内容div的方法，如果content_length＆gt; viewport.height，但如果content_length

使用html + css的解决方案会非常棒，但我开始认为我将不得不做一些时髦的jQuery onviewportresize或其他什么

任何建议都很棒，谢谢！

Answer 1

我会欺骗并使页脚包含重叠部分。然后只需将主要内容扩展到底部。 （在这种情况下左右两行。）

您的代码不需要拉伸 - 视觉显示在浏览器调整大小时会产生拉伸的错觉 - 这就是所需要的。

Answer 2

我使用jQuery height()取得了很大的成功。它返回计算出的高度，您可以在$（window）.resize（）或$（document）.resize（）事件中检查它。

Answer 3

再次阅读您的图表后，可能会有一个HTML / CSS解决方案：

<强> CSS

#footer { position: absolute; z-index:9999; background: url(...) no-repeat top center; height: (height of image); bottom: 0; left: 0; width: 100%; }

<强> HTML

<div id="content"></div>
<div id="footer">This floats above everything else and remains at the bottom of the page.</div>

试试这个并告诉我。