CSS动态定位页脚(粘性页脚问题)

时间:2011-03-01 13:37:23

标签: css position footer sticky-footer

我试图达到粘性页脚所做的相同效果,但是我遇到的问题不会出现在任何教程或问题中:我的页脚的高度也是动态的。

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

目前我在jQuery中成功实现了这个,但是我想要一个仅限CSS的方法(如果有的话),因为有些用户在他们的浏览器中禁用了JavaScript。

非常感谢!

修改

我的代码非常常见:我的<header>标记中有<aside><section><footer><body>。 在jQuery中,我几乎将这些元素(没有页脚)的高度总和与浏览器视口相比较。如果值更大,我会在页脚中添加position:relative,否则我会向其添加position:absolute; bottom:0

1 个答案:

答案 0 :(得分:1)

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