Question

所以我给了我的页脚一个背景颜色，但它没有显示，所以我想知道正确的代码是什么？？这是我的 html 代码：

.footer {
  background-color: #D4D4D4;
}

<div style="background-color: #d4d4d4;">
  <footer style="background-color: #d4d4d4;">
    <div style="position:relative;background-color:#d4d4d4" class="footer">
      <div style="position: absolute; left:1%">
        <p style="font-size: 10pt;"><img src='images/DBA LOGO.png ' width="30" height="30" align="left" style="display: inline-block;">DIGITAL BUCKET COMPANY</p>
      </div>
      <div style="position: absolute; left:20%">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
      </div>
      <div style="position: absolute; left:50%">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>

      </div>
      <div style="position: absolute; left:80%">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
      </div>
    </div>
  </footer>
</div>

这是它的样子：

我还希望图片和文字保持一致。

Answer 1

您的页脚不占用空间，因为它里面的所有内容都是绝对定位的（这意味着该元素已从文档的正常流程中删除）。我会让页脚弯曲，然后删除绝对定位：

.footer {
  background-color: #D4D4D4;
  display: flex;
}

.logo {
  width: 20%;
}

.column {
  width: 27%;
}

<div style="background-color: #d4d4d4;">
  <footer style="background-color: #d4d4d4;">
    <div style="position:relative;background-color:#d4d4d4" class="footer">
      <div class="logo">
        <p style="font-size: 10pt;"><img src='images/DBA LOGO.png ' width="30" height="30" align="left" style="display: inline-block;">DIGITAL BUCKET COMPANY</p>
      </div>
      <div class="column">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
      </div>
      <div class="column">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>

      </div>
      <div class="column">
        <h3>Pages</h3>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
      </div>
    </div>
  </footer>
</div>

Answer 2

当你把一个div的位置设为绝对时，它会从页面的正常流程中移除，所以父级不知道自己的大小，所以你必须手动定义大小。你的页脚类应该是这样的：

.footer {
  background-color: #D4D4D4;
  width: 100%;
  height: 200px
}

为什么我的页脚中没有显示背景？

2 个答案: