Question

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

＆＃13;

#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;
}

＆＃13;

<div id="content">
  <div id="logo">
    <img logo here>
  </div>

  <div id="paragraph">
    <p>here
  </div>

  <div id="footer">
    Footer content
  </div>
</div>

＆＃13;

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

Answer 1

    <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文件中，而不是像这样内联。我只是写了它来解决问题。伪元素＆＃34;之后＆＃34;会在＆＃34;之后添加一些东西＆＃34;你的id =段落元素应该有助于它与页脚之间的一点间距。除此之外，添加＆＃34;清除：两者＆＃34;对于页脚元素应确保是否添加＆＃34;：＆＃34;或不是你的页脚＆＃34;清除＆＃34; HTML中它上面的所有元素。我添加了2px以提供一点缓冲。您可以根据需要更改或删除它。我建议至少留下一条1px线作为margin-top或margin-bottom，所以它不是一个空元素。

我同意你可能想删除＆＃34;绝对＆＃34;从你的造型到位置。

Answer 2

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

Answer 3

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

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

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

页脚。它与div重叠

3 个答案: