浮动内容下的粘性页脚答案

【问题标题】：Sticky footer under floated content浮动内容下的粘性页脚
【发布时间】：2012-10-05 06:34:26
【问题描述】：

我有一个页面，其中内容浮动在中心，因此在任何浏览器大小下，内容 div 总是会在中间发出砰砰声。

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

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

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

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

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

【问题讨论】：

我真的不知道你想要达到什么目的。没有“相对浮动”，如果您在包装器内移动页脚元素，它应该很容易出现在黄色框下方。
@feeela 抱歉，对此有点陌生。如果我将页脚移动到 wrapper 元素内，它是否仍不会出现在内容下方，而是显示在黄色内容的前面？这似乎与两个粘性页脚网站试图让我做的事情背道而驰

【解决方案1】：

尝试使用：

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

【讨论】：

【解决方案2】：

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

【讨论】：