页脚。它在 div 上重叠答案

【问题标题】：Footer. It overlaps on div页脚。它在 div 上重叠
【发布时间】：2018-03-14 17:49:46
【问题描述】：

我的网站页脚有问题。它与内容 div 重叠。我有这样的结构：

#content {
  width: 80%;
  color: white;
  margin: 0 auto;
  font-family: "Arial";
  clear: both;
}
#footer {
  font-family: "Arial";
  left: 0;
  right: 0;
  bottom: 0;
  color: #E6E6E6;
  padding: 2%;
  font-size: 70%;
  text-align: center;
  position: absolute;
}

<div id="content">
  <div id="logo">
    <img logo here>
  </div>

  <div id="paragraph">
    <p>here
  </div>

  <div id="footer">
    Footer content
  </div>
</div>

问题是在一个页面中我有一个图像和一个段落，它看起来很好，因为它没有触及页脚位置。但是当我有需要滚动的文本时，页脚会重叠在其中

【问题讨论】：

是的，当您使用绝对定位时会发生这种情况。
在内容 div 中添加与页脚高度相等的下边距。还有，Orlol 所说的。
绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好、响应速度更快的选项。查看LearnLayout.com
好吧，那我看看相对定位...谢谢

标签： html css

【解决方案1】：

因为你使用的是 position:absolute;这意味着任何具有绝对位置的元素无论如何都会被放置在那里，所以你最好使用 position:relative;

【讨论】：

【解决方案2】：

    <div id="paragraph">
        <p> here is where you want to make your change.
    </div>
<style>
   #paragraph::after{
      margin-top:2px;
      margin-bottom:2px;
   }

   #footer{
   clear:both;
   }
</style>

将样式放入您的 .css 文件中，而不是像这样内联。我只是写它来说明问题。伪元素“after”将在 id=paragraph 元素“之后”添加一些内容，这应该有助于在该元素和页脚之间留出一点间距。除此之外，将“clear:both”添加到页脚元素应确保您是否添加“:after”以确保页脚“清除”HTML 中其上方的所有元素。我添加了 2px 以提供一点缓冲。您可以根据需要更改或删除它。我建议至少为 margin-top 或 margin-bottom 保留一个 1px 的线，这样它就不是一个空元素。

我同意您可能也想从您的职位样式中删除“绝对”。

【讨论】：

【解决方案3】：

将页脚位置更改为relative;，当前页脚位于容器div的顶部。

因为您正在使用 % 将页脚 div 移出它的容器以丢失任何继承的属性。

http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：