Question

当我向下滚动时，我无法管理页面的页脚以保持在底部，我将它放在“位置：绝对;”和“底部：0”但它不起作用，当我向下滚动它超过页面的内容。我不想使用position：fixed因为我不想让页脚覆盖我的内容。这是我的Jsfiddle： Jsfiddle

页脚：

footer {
    position: absolute;
    -moz-box-shadow: inset 0px 4px 20px #111;
    -webkit-box-shadow: inset 0px 4px 20px #111;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 50px;
    background-color: #333;
}

身体：

body {
    background-image: url(../img/pictures/background3.png);
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
}

Answer 1

这是让页脚停留在页面底部的一种方法，您可以在主体底部设置一个相对于页脚高度的空间。这样，它不会悬停在您的内容上，也不会位于页面的中心。

body {
    margin: 0 0 50px
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #333;
}

Answer 2

使用“粘性页脚”，http://bavotasan.com/2010/creating-a-sticky-footer-for-your-site/。如下面的示例（用于在窗口上滚动的额外<p>标记）：

HTML

<div class="wrap">
  <div class="content">
    <p>Here goes the content</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
  </div>
</div>
<div class="footer">
  Here comes the footer, always at the bottom of the page
</div>

CSS

html,body{ height:100% }
.wrap{
  height: auto;
  min-height: 100%;
  width: 100%;
}
.content{
  height: 100%;
  padding-bottom: 50px;
}
.footer{
  margin-top: -50px;
  height: 50px;
}

Answer 3

在页脚上尝试position:fixed，请将其保留在底部。

Answer 4

最好的办法是使用position: fixed;，这与绝对定位非常相似，只不过它设计为对浏览器视口有粘性。

Answer 5

您应该使用position: relative并为其top margin 167px（您的标题高度已修复）。

footer {
    position: relative;
    -moz-box-shadow: inset 0px 4px 20px #111;
    -webkit-box-shadow: inset 0px 4px 20px #111;
    margin-top: 167px;
    text-align: center;
    width: 100%;
    height: 50px;
    background-color: #333;
}

无法让页脚停留在页面底部

5 个答案:

HTML

CSS