Question

我的网站主要内容设为position:absolute。

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

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

如果内容未超过页面高度，则此方法可以正常工作。但是，当内容滚动到其下方时，页脚会保持在原位。

我尝试了Ryan Faits sticky footer但是当主要内容有位置时，这似乎不起作用：绝对设置。

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

如果您想查看我的网站，请访问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有一个很好的方法来做到这一点。 Link is here

或者你可以使用CSS Sticky Footer See here

关键是在主容器中创建一个负底边距，使用你想要你的页脚的确切高度。

我希望这会有所帮助。

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

1 个答案: