css 我怎样才能得到我的页脚问题修复？

a0zr77ik 于 2023-03-09 发布在其他

关注(0)|答案(3)|浏览(112)

大家好，我是一个很新的HTML和CSS是有什么办法让我这个页脚的背景是在整个页脚，而不是一位。我尝试了一些事情，但将超过圈的联系论坛的一小部分，但它是很烦人的，我找不到如何解决这个问题

.footer,
.push {
  height: 50px;
}

.footer {
  background: #000f14 !important;
  padding: 20px !important;
  text-align: center !important;
  position: absolute !important;
  bottom: 0 !important;
  margin-top: 50px;
  width: 100% !important;
}

.column {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  text-align: left;
  margin: 0 2.5%;
  margin-top: 15px;
  background: #000f14;
}

.column h3 {
  margin-top: 0;
  margin-bottom: 10px;
  background: #000f14;
  font-size: 25px;
}

.column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #000f14;
}

.column ul li {
  padding: 5px 0;
  background: #000f14;
  font-size: 15px;
}

.column p {
  margin: 0;
  background: #000f14;
  font-size: 15px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="footer-placeholder">
    <div class="footer">
      <div class="column">
        <h3>Contact Information</h3>
        <ul>
          <li>1234 Example Street</li>
          <li>Example City, XX 12345</li>
          <li>Phone: (555) 555-5555</li>
          <li>Email: info@example.com</li>
        </ul>
      </div>
      <div class="column">
        <h3>Services</h3>
        <ul>
          <li>Web Design</li>
          <li>Graphic Design</li>
          <li>Marketing</li>
          <li>SEO</li>
        </ul>
      </div>
      <div class="column">
        <h3>Trademark</h3>
        <p>&copy; 2023 AquaTech. All rights reserved.</p>
      </div>
    </div>
  </div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/75482107/how-could-i-get-the-issue-with-my-footer-fixed

3条答案

按热度按时间

eanckbw91#

需要在类中添加高度。footer { height：auto }为了使页脚的内容可见，请在类中添加颜色。column{color：白色}
这两个CSS类的最终外观如下所示;
.页脚{背景：#000f14！重要;填充：20 px！重要;文本对齐：中心！重要;位置：绝对！重要;底部：0！重要;上边距：50 px;宽度：100%！重要;高度：自动;}
.列{显示：内联块;宽度：25%;垂直对齐：靠上;文本对齐：左边;边距：0 2.5%;上边距：15 px;背景：#000f14;颜色：白色;}
此外，您还可以查看下面的链接，直观地看到解决方案：TestWise Replay| fixed the footer height

赞(0）回复(0）举报 2023-03-09

r6l8ljro2#