我的网站有问题http://artygirl.co.uk/pixie/about/我似乎无法让页脚自动贴在浏览器底部，并显示我的其余背景。有没有比使用 position:fixed 或 absolute 更好的解决方案？
我认为可能有其他样式覆盖我在 firebug 中所做的一些测试。
感谢您的帮助问候朱迪
问问题
61475 次
10 回答
41
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这样它就不会覆盖您的内容。
适用于我测试过的几乎所有浏览器。
于 2011-12-13T14:36:04.270 回答
9
我之前在这篇文章中使用过该技术：CSS 布局：100% 高度，带有页眉和页脚。它确实需要在您的 HTML 中添加一些额外的标记。
于 2010-04-03T15:18:08.353 回答
5
这总是有点困难，你可以增加min-height你的内容区域，但即使有人有一个非常大的屏幕，你也会看到同样的东西。
如果某人有一个巨大的视口，你可以使用一点 JavaScript 来增加它，min-height但这仍然不够优雅。我不确定是否有纯 CSS 解决方案。
如果您想尝试上面我刚刚发布的代码：使用 jQuery 检测滚动条是否存在仍然很困难？可能对你有用。
于 2010-04-03T15:12:58.573 回答
3
将 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>
于 2010-04-03T15:56:01.807 回答
2
这里有一个例子和解释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>于 2012-07-10T03:04:31.080 回答
0
你可以设置一个min-heighton #content。这不会专门将页脚固定到浏览器的底部，但会确保您始终可以看到一定数量的背景。
作为替代方案，您可以使用 JavaScript 确定浏览器窗口的高度，然后计算min-heightfor #content，并使用 JavaScript 应用它。这将确保页脚始终位于正确的位置。
于 2010-04-03T15:16:36.253 回答
0
我已经想通了。Html 有一个背景的 css 属性，表示颜色为白色。
于 2010-04-03T15:22:31.437 回答
0
由于页面上的内容可变，我总是更喜欢页面明智的页脚。我的页脚使用了 5em 的上边距。大多数情况下，我们知道页面上可能出现的内容的高度。
于 2010-04-03T16:03:29.270 回答
0
不要使用position:absolute使用position:relative代替。
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute会将其粘贴到屏幕底部，而 position relative 不会忽略其他 div，因此它将停留在整个页面的底部。
于 2015-09-22T10:17:04.277 回答