Question

我的网站出现问题http://artygirl.co.uk/pixie/about/我似乎无法自动粘贴到浏览器的底部，并显示其余的背景信息。有没有比使用position更好的解决方案：固定还是绝对？

我认为可能还有其他风格超过了我在萤火虫中做的一些测试。

感谢您的帮助问候朱迪

Answer 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的高度，这样就不会覆盖您的内容。

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

Answer 2

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

Answer 3

这总是有点困难，你可以增加你的内容区域min-height，但即便如此，如果有人有一个非常大的屏幕，你会看到同样的事情。

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

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

Answer 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>

Answer 5

这里有一个示例和说明http://ryanfait.com/sticky-footer/

Answer 6

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

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

Answer 7

我已经弄清楚了。 Html有一个背景的css属性，说白色。

Answer 8

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

Answer 9

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

Answer 10

请勿使用 position：absolute 使用 position：relative 。

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

位置：绝对会将其粘贴到屏幕底部，而位置相对不会忽略其他div，因此它将保留在整页的底部。

css页脚位置坚持浏览器底部？

10 个答案: