Html 粘性页脚+；浮动元素

还有一个关于粘性页脚css的问题。。。 假设我有以下标记：

<div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
</div>

标题
身体
页脚

正如您在本文中所看到的，对于给定的css，sticky footer的工作方式很有魅力。
如果div#body只有少量内容，则它会停留在页面底部，如果有大量内容，则会从底部的屏幕中推出

我现在的问题是，当我尝试在div#body中放置2个浮动div（1个左-1个右）时。 然后，页脚位于屏幕底部，但当有大量内容时，页脚不会向下推（您可以看到）

我怎样才能让它工作？我已经尝试了1000个在网络上发现的技巧，但仍然无法理解如何使其发挥作用

提前感谢。

试试：

#body {
   overflow:hidden;
}

编辑：这样您就不需要额外的元素来清除浮动。

尝试：

#body {
   overflow:hidden;
}

编辑：这样您就不需要额外的元素来清除浮动。

将

放在浮动div之后

如下所示：

将

放在浮动div之后

---

像这样：

感谢您的快速回复，它确实有效。Per Holmäng的建议也有效，但他速度稍快，所以我接受他的回答。但再次感谢您的打扰！：）像这样的解决方案唯一令人遗憾的是，它将布局逻辑放入了只应该是数据的内容中（HTML=data，CSS=layout）。感谢您的快速回复，它真的很有效。Per Holmäng的建议也有效，但他速度稍快，所以我接受他的回答。但再次感谢您的打扰！：）像这样的解决方案唯一令人遗憾的是，它将布局逻辑放入了只应该是数据的内容（HTML=data，CSS=layout）中。下面是同一个解决方案的工作示例：下面是同一个解决方案的工作示例：