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/

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

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

我怎样才能获得40px左右的粘性页脚

3 个答案: