如何从覆盖内容停止置顶页脚...？(How to stop Sticky Footer from c

我使用的是“粘”的页脚，但在几页它覆盖的内容。有什么办法来防止这种情况的发生，但保留它的“粘性”质量？

我试图用min-height:在HTML和body ，但没有奏效。

CSS：

html {
    background: black url(images/bg2.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
#container {
    min-height: 100%;
    position: relative;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
#body {
    padding-bottom: 100px;
    float: left;
    background-color: rgba(0,0,0,0.7);
    width: 750px;
    height: 400px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}

HTML：

<body>

<div id="container">

  <div id="header">
    <div class="logo">C</div>

     <ul class="main_nav">
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="music.html">Music</a></li>
       <li><a href="services.html">Services</a></li>
       <li><a href="gallery.html">Gallery</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
  </div>

  <div id="body">
   <div id="bio_wrapper">

   </div>
  </div>

  <div id="footer">
    <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span>
  </div>

</div>

</body>

Answer 1:

正如阿米特说，你应该把margin-bottom为你的body ，并使用min-height ，而不是height ：

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}

你应该删除高度：100％从<body>

希望这可以帮助！

Answer 2:

如果你的身体DIV关闭前躯格开始，然后使用边距属性。例如，如果页面结构是

<div id="body">
</div>
<div id="footer">
</div>

然后写

#body{
   margin-bottom: (height of your footer);
}

如果你的代码结构不是这样的。我的意思是你的页脚DIV是身体DIV中。然后使用保证金底属性刚刚页脚DIV开始之前关闭股利。

Answer 3:

看看这个解决方案。您可以使用绝对定位为您所有的主要内容元素（头，条，页脚）的。使用@media查询创建在不同分辨率下休息，如果你需要为不同的屏幕宽度的页眉或页脚高度的变化（响应式设计），并告诉你的主要内容区域隐藏溢出。您可以为主要内容的区域内使用浮动，相对布局这种方式，也是如此。

Answer 4:

在最后一个div之前页脚只需添加样式=“高度：100％;填充底：0;” 覆盖的一般规则，你有一些冲突很可能会用。

文章来源: How to stop Sticky Footer from covering content…?