10

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

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

感谢您的帮助问候朱迪

4

10 回答 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

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

于 2012-06-06T15:30:30.653 回答
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 回答