logo标签列表

CSS页脚如何固定在浏览器底部？

cssoverflowpositionfooterfixed
10
我遇到了一个问题，我的网站 http://artygirl.co.uk/pixie/about/ ，我似乎无法让页脚自动粘着浏览器底部，并显示我的背景。 除了使用 position:fixed 或 absolute 的解决方案之外，是否有更好的解决方法？
我认为可能有其他样式覆盖了我在 firebug 中测试的某些内容。
谢谢您的帮助 敬礼 朱迪
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 底部添加额外的 margin/padding，其高度等于页脚的高度+5px，以便它不会覆盖您的内容。

在我测试过的几乎所有浏览器中都可行。

你在这里声明了两次position变量？ - user156888
3
这很可能是故意为之的。这看起来像是CSS下划线hack，利用解析漏洞使得Internet Explorer 6及以下版本读取与其他浏览器和更高版本不同的样式。 - Rory O'Kane
9
哇，谢谢，这听起来很不错。但是它在我的主题上不起作用，所以我可能会尝试在另一个主题上使用 :) - brightmist.co.uk
很不错。我现在用的是迷你笔记本，所以无法在其他浏览器中测试它，有没有任何浏览器无法使用？.. IE6？ - Steve
我刚在我的新作品集上实现了这个解决方案 :) - Steve
roryf，这是一个不错的、简单明了的解释。感谢提供链接。 - ghoti
5
这总是有点困难的，你可以增加内容区域的min-height，但即使如此，如果有人有一个非常大的屏幕，你会看到同样的情况。 如果某人有一个巨大的视口，您可以使用一些JavaScript来增加min-height，但这仍然不太优雅。我不确定是否有CSS-only的解决方案。 如果您想尝试上述代码，我刚刚在这里发布的代码：Is detecting scrollbar presence with jQuery still difficult?可能对您有用。
现在我感到决心提出一个仅使用CSS的解决方案;-) - Josh
3

将html和body的高度设为100％，插入一个min-height为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兼容性和工作演示。 - Steve
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>

Ryan Fait的粘性页脚是最好的！ - inorganik
0
您可以在#content上设置min-height。这不会特别将页脚固定到浏览器底部，但会确保始终可以看到一定量的背景。
另一种选择是使用JavaScript来确定浏览器窗口的高度，然后计算#content的min-height并使用JavaScript应用它。这将确保页脚始终位于正确位置。
0
我已经弄清楚了。HTML有一个CSS属性，用于设置背景颜色为白色。
0

我总是更喜欢按页面设置页脚，因为页面上的内容是可变的。我在页脚上使用5em的顶部边距。大多数情况下，我们知道页面上可能出现的内容高度。

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

不要使用 position:absolute，而应该使用 position:relative。

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

position: absolute会将它粘在屏幕底部，而相对定位不会忽略其他的div，因此它会留在整个页面的底部。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接