CSS页脚位置粘在浏览器底部？答案

【问题标题】：css footer position stick to bottom of browser?CSS页脚位置粘在浏览器底部？
【发布时间】：2011-02-04 00:30:30
【问题描述】：

我的网站有问题http://artygirl.co.uk/pixie/about/ 我似乎无法让页脚自动贴在浏览器底部，并显示我的其余背景。有没有比使用 position:fixed 或 absolute 更好的解决方案？

我认为可能有其他样式会覆盖我在 firebug 中进行的一些测试。

感谢您的帮助问候朱迪

【问题讨论】：

【解决方案1】：

CSS：

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

HTML：

<div class="podbar">
    Put your footer here
</div>

这将创建一个始终显示在页面底部并覆盖所有内容的便签。只需在主容器 div 的底部添加额外的边距/填充，等于页脚 +5px 的高度，这样它就不会覆盖您的内容。

几乎适用于我测试过的所有浏览器。

【讨论】：

你在这里声明了两次职位？
@iwayneo 这可能是故意的。它看起来像CSS underscore hack，利用一个解析错误使 Internet Explorer 6 及更低版本从更高版本和其他浏览器读取不同的样式。

【解决方案2】：

我以前使用过本文中的技术：CSS layout: 100% height with header and footer。它确实需要在您的 HTML 中添加一些额外的标记。

【讨论】：

哇，谢谢，这听起来很棒。不过它不适用于我的主题，所以我可能会尝试不同的主题:)
这很漂亮。我在我的上网本上，所以我无法在其他浏览器中测试它 - 是否有任何它不起作用？... IE6？
我刚刚在我的新产品组合中实施了这个解决方案 :)
roryf，这是一个很好的简单解释。感谢您的链接。

【解决方案3】：

这总是有点困难，您可以增加内容区域的min-height，但即使这样，即使有人拥有非常大的屏幕，您也会看到相同的内容。

如果有人有一个巨大的视口，你可以使用一点 JavaScript 来增加min-height，但这仍然不够优雅。我不确定是否有纯 CSS 解决方案。

如果你想试试上面我刚刚发布的代码：Is detecting scrollbar presence with jQuery still difficult? 可能对你有用。

【讨论】：

现在我决心想出一个纯 CSS 的解决方案 ;-)

【解决方案4】：

将html和body的高度设置为100%，插入一个最小高度为100%的容器div和相对位置，并用position: absolute, bottom: 0嵌套你的页脚；

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

【讨论】：

与 Rory Fitzpatrick 发布的内容相同，但缺少 IE6 兼容性和工作演示。

【解决方案5】：

这里有例子和解释http://ryanfait.com/sticky-footer/

编辑：由于该站点处于脱机状态，这是另一个工作示例：https://gist.github.com/XtofK/5317209 和 https://codepen.io/griffininsight/pen/OMexrW

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
  height: 50px; /* '.push' must be the same height as 'footer' */
}

footer {
  
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

【讨论】：

Ryan Fait 的粘性页脚是最好的！

【解决方案6】：

您可以在#content 上设置min-height。这不会专门将页脚固定到浏览器底部，但会确保您始终可以看到一定数量的背景。

作为替代方案，您可以使用 JavaScript 确定浏览器窗口的高度，然后计算 #content 的 min-height，并使用 JavaScript 应用它。这将确保页脚始终位于正确的位置。

【讨论】：

【解决方案7】：

我想通了。 Html 有一个背景的 css 属性，表示颜色为白色。

【讨论】：

【解决方案8】：

由于页面上的内容可变，我总是更喜欢页面明智的页脚。我为页脚使用 5em 的上边距。通常情况下，我们知道页面上可能出现的内容高度。

【讨论】：

【解决方案9】：

如果您将Compass 库用于Sass，还有另一种选择。您可以使用 Compass 的 sticky-footer mixin (demo)。它要求页脚是固定高度的，并且您的 HTML 具有一定的一般结构。

【讨论】：

【解决方案10】：

不要使用 position:absolute 而是使用 position:relative。

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

position: absolute 会将它贴在屏幕底部，而 position relative 不会忽略其他 div，因此它会停留在整个页面的底部。

【讨论】：