如何使页脚位于页面底部？

Question

我遇到了一些麻烦，我的页脚不会停留在页面底部，滚动时它会“粘在”屏幕的底部。

当我滚动时，它最终覆盖了页面的一部分，变得很烦人。

这是我的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是正确的方法。

至于“底部留有一些空白”？ 尝试以您的样式添加以下代码： body {margin:0;}

Answer 3

尝试将CS​​S中的位置更改为绝对位置。

#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元素的边距和填充设置为0；否则，将其设置为0。

body {
    padding: 0;
    margin: 0;
}