html - 无法让页脚颜色一直到底部

Question

我希望页脚的黑色部分一直延伸到页面底部。相反，灰色在那里。我怎样才能改变这个？我已尝试将高度更改为 100%，但没有任何变化。

/* -- Footer Styles -- */

footer {
  overflow: auto;
  clear: both;
  background: #222;
  padding-bottom: 0;
}

footer h1 {
  float: left;
  text-align: center;
  width: 20%;
  padding-top: 5px;
  margin: 5px;
  color: #DDD;
}

footer article {
  width: 10%;
  border: none;
  display: inline-block;
  float: right;
  box-shadow: none;
}

footer a {
  text-decoration: none;
  color: #DDD;
}

footer ul {
  list-style: none;
  text-align: left;
  font-size: 12px;
  padding-left: 0;
}

#cpyrt {
  clear: both;
  background: #010101;
  color: #666;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-top: 1px solid #9B0F00;
}

#cpyrt ul {
  display: inline-block;
  font-size: 14px;
  padding: 5px;
}

<footer>
  <h1>Dungeon<br>Dudes</h1>

  <article>
    <h6>Quick Links</h6>
  </article>

  <article>
    <h6>Support</h6>

    <ul>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </article>

  <article>
    <h6>Follow Us</h6>

    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">YouTube</a></li>
    </ul>
  </article>

  <article id="cpyrt">
    <p>&copy; 2018 Dungeon Dudes | All Rights Reserved</p>

    <ul>
      <li><a href="#">Terms of Service</a></li>
      <li><a href="#">Support</a></li>
    </ul>
  </article>
</footer>

Webpage Footer Current State

图片显示了它当前的样子。我试图在不改变整个页脚元素颜色的情况下将底部的灰色部分变成黑色。

Answer 1

您在 footer 选择器中定义了颜色 #222，您又在 ID 选择器中覆盖了 footer 的颜色>#cpyrt 。按照下面的CSS

#cpyrt {
  clear: both;
/*   background: #222; */ //-->remove element
  color: #666;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-top: 1px solid #9B0F00;
}

参见 Live Demo

希望对你有帮助!!