网页页脚仍保留在浏览器窗口的底部

Question

我希望我的页脚(在某些页面上)保持固定在浏览器窗口的底部,而不管内容的高度.与您在www.facebook.com和meebo工具栏(例如abduzeedo.com)等网站上浏览器窗口底部固定的某些工具栏类似.

我做了一些快速搜索,我看到一些jQuery脚本和CSS黑客用户抱怨IE不兼容等等...有一个很好的标准方法吗？即使使用meebo和facebook,看起来工具栏在滚动时也会有点跳跃,而CSS解决方案看起来非常可靠.有简单的CSS解决方案吗？我认为这是使得页脚与底部具有绝对定位的线条:0 ......

Answer 1

如果你想要"粘"到底部,你应该使用css 固定位置.这将把它定位到窗口的底部.

使用"绝对"将不正确,因为它将相对于第一个非静态元素定位div.大部分时间这是窗口,但情况并非如此.

Html代码:

<div class="bottom"><h1>Add to bottom</h1></div>

Css代码:

div.bottom {
    position:fixed;
    bottom:0px;
    height:200px;
    left:0px;
    right:0px;
    border:solid 4px red;
}