CSS粘性页脚，主要内容设置位置：绝对？

Question

我有一个网站，主要内容设置为

position:absolute

。

我已将页脚设置在页面底部，如下所示：

position:absolute;
bottom: 0;
height: 100px;
width: 100%;

如果内容不超过页面的高度，则效果很好。但当它发生时，页脚保持在原位，而内容在其下方滚动。

我尝试过 Ryan Faits 粘性页脚，但是当主要内容具有位置：绝对设置时，这似乎不起作用。

有人知道这样做的好方法吗？最终，我只是希望页脚始终位于页面底部 - 不必在用户滚动时跟随用户。

如果您想看一下，我的网站在这里：http://www.theoutlookcafedubbo.com.au/newsite/index.php?id=2

Answer 1

页脚始终在视口底部可见

如果您希望页脚始终位于屏幕底部，请将 CSS 更改为此：

#footer {
    width: 100%;
    height: 100px;
    background-color: #000000;
    position: fixed;
    bottom: 0;
    background-image: url(tmpimages/darkwall.png);
}

页脚永远不会高于视口的底部

如果您正在寻找真正的“粘性页脚”（即仅在滚动到长页面底部后才可见的页脚，但即使页面内容小于视口，它也位于视口的最底部） ，尝试以下操作：

首先 Twitter Bootstrap 有一个很好的方法来做到这一点。 链接在这里

或者您可以使用 CSS 粘性页脚 参见此处

关键是在主容器中创建负底部边距，使用您希望页脚达到的确切高度。

我希望这有帮助。