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

【问题标题】：Webpage footer remains on bottom of browser window网页页脚保留在浏览器窗口的底部
【发布时间】：2011-01-16 19:32:31
【问题描述】：

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

我做了一些快速搜索，我看到一些 jQuery 脚本和 CSS hack，用户抱怨 IE 不兼容等...有没有一个好的标准方法来做这件事？即使使用 meebo 和 facebook，工具栏似乎在您滚动时会有点跳跃，而 CSS 解决方案看起来非常可靠。有没有简单的 CSS 解决方案？我认为这是使页脚具有绝对定位底部的东西：0 ...

【问题讨论】：

嘿@at... 有用吗？我注意到您尚未选择答案。
我只是没有机会使用 IE 进行测试，但无论如何都将答案归功于您。谢谢。

标签： html toolbar css-float css

【解决方案1】：

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

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

【讨论】：

position:fixed 正是我想要的。为什么搜索它会产生如此多的 JavaScript 脚本和 CSS hack 来使其工作？使用 position:fixed 是否存在任何问题、兼容性或其他问题？
@at well...很多时候人们认为他们知道css...但他们不知道。 Julian 说的是真的……在 IE6 中位置的实现可能非常讨厌。这就是为什么许多人为此使用黑客的原因。如果您有问题，我会推荐 IE6 和更低版本的条件脚本。但是......它应该工作。

【解决方案2】：

有个名叫 Soh Tanaka 的人提供了一个非常好的教程 - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

【讨论】：

【解决方案3】：

在 CSS 中使用绝对定位。

http://jsfiddle.net/TMD9X/

【讨论】：

我不明白。你能为我设置一个小提琴来说明吗？谢谢。