css - float 内容下的粘性页脚

Question

我有一个内容 float 在中心的页面，因此在任何浏览器大小下，内容 div 总是会在中间砰砰作响。

现在，我已经在页面上添加了一个粘性页脚，但是当浏览器窗口小于预期时，页脚会显示在 float 内容的前面。

我不太了解清除 float 的工作原理或绝对定位如何影响相对定位。我知道一旦我将页脚设为绝对，它就会独立于所有其他 div，这自然不是我想要的，但这就是我被卡住的地方。

我的问题是，如果浏览器屏幕的高度较小，如何让粘性页脚显示在页面底部，但又保持在 float 内容下方(我的意思是下方)。

这是我当前代码的示例:http://jsfiddle.net/ySru9/1/

我从这里获取了粘性页脚代码:http://www.cssstickyfooter.com/style.css在这里 http://ryanfait.com/sticky-footer/layout.css

如果这是关于 SO 的另一个问题的重复，我很抱歉，但我已经搜索过了，找不到完全相同的东西。我假设我需要深入研究一些令人讨厌的 jquery 内容？

Answer 1

如果您使页脚绝对定位在您的主体中，但要确保主体的最小高度大于您的黄色容器，这可能有效:

http://jsfiddle.net/willemvb/PZHvH/