CSS动态定位页脚（粘性页脚问题）答案

【问题标题】：CSS dynamically position footer (sticky footer problem)CSS动态定位页脚（粘性页脚问题）
【发布时间】：2011-07-06 12:39:34
【问题描述】：

我正在尝试实现与粘性页脚相同的效果，但我有一个问题没有出现在此处提出的任何教程或问题中：我的页脚的高度也是动态的。

我的页脚中有一些新闻项目，因此页脚的高度会根据这些新闻项目的长度而变化。显然，当内容的高度小于浏览器的视口时，我希望页脚绝对位于页面底部，并且当其高度高于实际视口时，相对于内容。

目前我在 jQuery 中成功实现了这一点，但我想要一个纯 CSS 方法（如果有的话），因为有些用户在他们的浏览器中禁用了 JavaScript。

非常感谢！

编辑：

我的代码很常见：我的<body> 标签中有一个<header>、一个<aside>、一个<section> 和一个<footer>。在 jQuery 中，我几乎将这些元素的高度总和（不包括页脚）与浏览器视口进行比较。如果值更大，我会在页脚添加一个position:relative，否则我会在其上添加一个position:absolute; bottom:0。

【问题讨论】：

我们可以看到您的代码，还是我们必须猜测？ :D

标签： css position footer sticky-footer

【解决方案1】：

CSS 可以通过使用bottom:0; position:fixed; 来完成其中的一些工作，但是 IE6 和 7 可能不支持。我建议将 CSS 方法与 jQuery 解决方案结合使用，这样您的所有用户都会有类似的体验。

【讨论】：

没用。我需要一个粘性页脚行为，而不是固定的。
我想我不明白其中的区别？能举个例子吗？
我已经编辑了我的答案。我希望页脚根据内容动态定位，类似于粘性页脚。