我如何獲得粘性頁腳40px margin-below和above

Question

我正在嘗試將頁腳粘貼到頁面底部。我希望它具有40px以上和以下的保證金，但它的工作不正常，並繼續在我的網站上的內容。有人可以幫我嗎？

<div id="footer"> 
    <div id="footer-line"> </div> 
    <div id="footer-nav"> <a href="index.html">Home</a> | <a href="expertise.html">Expertise</a> | <a href="doctors.html">Doctors</a> | <a href="facility.html">Facility</a> | <a href="contacts.html">Contacts</a></div> 
    <div id="footer-copyright">© 2013 Website, Inc. All Rights Reserved.</div> 
</div> 

#footer { 
    margin: auto; 
    width: 900px; 
    height: 50px; 
    margin-bottom: 40px; 
    position: fixed; 
    bottom: 0; 

} 
#footer-line { 
    margin: auto; 
    width: 900px; 
    height: 2px; 
    background-color: #C9DA2A; 
    margin-top: 35px; 
} 
#footer-nav { 
    margin: auto; 
    float: left; 
    width: auto; 
    height: 30px; 
    color: #666666; 
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif; 
    margin-top: 15px; 
    text-decoration: none; 
} 
#footer-nav a { 
    color: #666666; 
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif; 
    text-decoration: none; 
} 
#footer-copyright { 
    margin: auto; 
    float: right; 
    width: auto; 
    height: 33px; 
    color: #666666; 
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif; 
    margin-top: 17px; 
    text-decoration: none; 
} 

Answer 1

你有#footer定義2頁邊距：

#footer { 
margin: auto; <---- 
width: 900px; 
height: 50px; 
margin-bottom: 40px; <---- 
position: fixed; 
bottom: 0; 

} 

應該margin: 40px auto;作爲固定部件，它會去在您網站上的內容。您需要通過將內容容器縮小到固定欄的高度來適應這種情況。

Answer 2

將div放在內容的底部。喜歡的東西...

<div class="push"></div>

然後用類似這種風格吧...

.push { 
height: 30px; 
clear: both; 

}

應該得到的一切下推。在我使用過的每個網站上都能正常工作。

Answer 3

退房小提琴

http://jsfiddle.net/HZ5NW/

再添格在你的代碼所示小提琴，從頁腳刪除CSS的這兩條線，並將它們添加到div容器。

#container { 
    position: fixed; 
    bottom: 40px; 
}