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

Question

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

我进行了一些快速搜索，看到一些 jQuery 脚本和 CSS 黑客，用户提示 IE 不兼容等问题...是否有好的标准方法来执行此操作？即使使用 meebo 和 facebook，当您滚动时，工具栏似乎会有点跳跃，而 CSS 解决方案看起来非常稳固。有没有简单的 CSS 解决方案？我认为这是使页脚具有 bottom: 0 的绝对定位...

Answer 1

如果你想让东西“粘”在底部，you should use the css fixed position .这会将其定位到窗口底部。

使用“绝对”是不正确的，因为它将相对于第一个非静态元素定位 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;
}