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

问题描述：

我试图达到粘页脚所做的相同效果，但是我遇到了一个问题，它不会在任何教程或问题中出现：我的页脚高度也是动态的。CSS动态定位页脚（粘性页脚问题）

我在页脚有一些新闻项目，所以页脚的高度根据这些新闻项目的长度而改变。显然，当内容的高度小于浏览器的view-port时，我希望footer被绝对定位到页面的底部，而当height高于实际的view-port时，相对于内容。

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

非常感谢！

编辑：

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

我们可以看到您的代码，还是我们必须猜测？：D – Kyle 2011-03-01 13:44:56

我编辑了我的问题。 – linkyndy 2011-03-01 14:17:23

答

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

它没有帮助。我需要一个粘性的页脚行为，而不是一个固定的行为。 – linkyndy 2011-03-01 17:21:19

我想我不明白区别？你能给个例子吗？ – Seth 2011-03-01 17:52:10

我编辑了我的答案。我希望页脚根据内容动态定位，类似于粘性页脚。 – linkyndy 2011-03-01 22:35:33

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

相关推荐