css - 浮动内容下的粘性页脚

Question

我有一个页面，其中内容浮动在中心，因此在任何浏览器大小中，内容 div 将始终在中间砰砰作响。

现在，我继续在页面中添加了一个粘性页脚，但是当浏览器窗口小于预期时，页脚会显示在浮动内容的前面。

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

我的问题是，如何使粘性页脚显示在页面底部，但如果浏览器屏幕的高度较小，则保持在浮动内容下方（我的意思是下方）。

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

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

如果这是关于 SO 的另一个问题的重复，我很抱歉，但我已经翻遍了，找不到任何相同的东西。我假设有一些我需要深入研究的令人讨厌的 jquery 东西？

score 2 · Accepted Answer

如果你让页脚在你的身体中绝对定位，但确保身体的最小高度大于你的黄色容器，这可能会起作用：

score 1 · Accepted Answer

尝试使用：

#container 
{
  margin: 0 0 0 -100px;
  position: relative;    
}

检查这个小提琴：http: //jsfiddle.net/ySru9/39/

2 回答 2