如何使頁腳位於頁面底部？

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;
}