Question

我遇到了一些麻烦，我的页脚不会停留在页面的底部，它会＆＃34;坚持＆＃34;滚动时到屏幕底部。

当我滚动并且变得非常讨厌时，它最终会覆盖页面的一部分。

这是我的HTML：

    <div id="footer" style="text-align: center">
    <p>Designed by ddrossi93. &copy;2015. All Rights Reserved.</p>
    </div>

我的CSS：

#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: fixed;
width:100%;
}

如果您需要更多信息，请告诉我，我可以发布更多代码。

Answer 1

 position: fixed;

意味着您的页脚将悬停在页面底部，就像导航栏在许多网站上一样。如果您希望页脚停留在页面底部，则需要将position更改为其他内容，例如absolute或relative。这是一个更多信息的链接。 http://www.w3schools.com/css/css_positioning.asp

Answer 2

您应该将position:fixed更改为position:relative，而不是position:absolute。 fixed会使您的元素保持在相对于屏幕视口的指定位置，并且在滚动时不会移动。如果您更改为absolute，则必须将position:relative添加到包含块或祖先，所以它不会位于页面的中间。转换为relative是正确的方法。

至于＆＃34;底部有一些空白区域＆＃34;？尝试在您的样式中添加以下代码： body {margin:0;}

Answer 3

尝试将CSS中的位置更改为绝对值。

#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: absolute;
width:100%;
}

Answer 4

另一种解决方案是将body元素的margin和padding设置为0;

body {
    padding: 0;
    margin: 0;
}

如何将页脚放在页面底部？

4 个答案: