html - 我怎样才能得到一个粘性页脚 40px 边距 - 低于和高于

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

在内容的底部放置一个 div。就像是...

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

然后用这样的样式...

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

}

应该把一切都推倒。在我使用过的每个网站上都可以正常工作。

Answer 2

看看小提琴

http://jsfiddle.net/HZ5NW/

如小提琴所示，在您的代码周围添加另一个 div，从页脚中删除这两行 css 并将它们添加到容器 div 中。

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

Answer 3

您在 2 中定义了边距#footer：

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

}

它应该是margin: 40px auto;作为一个固定元素，它将遍历您网站上的内容。您需要通过将内容容器缩小到固定栏的高度来适应这一点。