如何修复/防止重叠到<footer>？

Question

我尝试过位置：固定/静态/相对/绝对...仍然在身体和身体上重叠有时是页脚（阻挡身体的其他部分）。

图像：

＆＃13;

＆＃13;

/* Footer */

footer {
  background: #444;
}

.h-sec {
  font: 22px Arial, Helvetica;
}

.sec {
  font: 9px, Arial, Helvetica;
}

#f-nav a {
  color: #F4F4F4;
}

#f-nav .current {
  color: #A9A9A9;
  text-decoration: underline;
}

.a-void {
  color: #000000;
}

＆＃13;

<footer>
  <section class="f-sec1">
    <h5>CAD | Tech Website&copy;</h5>

    <br>
    <div id="f-nav">
      <a href="index.html" class="current">Home</a>
      <a href="services.html">Services</a>
      <a href="contact.php">Contact</a>
      <a href="about.html">About us</a>
    </div>

  </section>

  <section>
    <a href="####.com" class="a-void">Donate :)</a>
  </section>
</footer>

＆＃13;

＆＃13;

＆＃13;

关于完整代码（图片中的错误）：https://jsfiddle.net/s0nk37cg/ - 它会看起来很精细但是因为没有图像，请看图像或让你自己的图像清晰易懂

Answer 1

试试这个：

第1步 - 将以下内容添加到您的css：

.clearfix:after {content:""; display:table; clear:both;}

第2步 - html中的变化： 变化：

    <section id="container" > 

- 到 -

     <section id="container" class="clearfix">

看看是否有帮助，你可能需要调整你的边距和/或填充

Answer 2

对此问题的简单修复是为body元素提供margin-bottom值，以避免在页面末尾重叠或滚动。提供取决于页脚高度的值。