html - 使用CSS在页脚中制作容器的全高

Question

我有一个页脚，其中包含我的导航列表。悬停时，我想更改 div 整个高度的背景颜色。就像现在一样，只有文本周围的背景在改变颜色。我已经尝试在文本中添加顶部和底部填充，但这并没有达到我想要的效果。有没有办法制作<a>包含页脚 div 高度的 100%？

代码如下:

footer {
  width: 100%;
  background: #222;
  color: #fff;
  margin: 0;
  position:fixed;
  left:0px;
  bottom:0px;
}

.footer-navigation {
  width: 60%;
  display: flex;
  align-items: center;
}

.footer-links-holder {
  width: 25%;
  position: relative;
  float: left;
  margin: 0;
}

.footer-links-holder:hover {
  background-color: #444;
  transition: 0.5s;
}

<div class="footer-navigation">
  <a class="footer-links-holder" href=""><h3>About Me</h3></a>
  <a class="footer-links-holder" href=""><h3>Photography</h3></a>
  <a class="footer-links-holder" href=""><h3>Portfolio</h3></a>
  <a class="footer-links-holder" href=""><h3>Back to Top</h3></a>
</div>

有人可以帮忙吗？我四处搜索，似乎找不到简单的解决方案。

编辑:这是一个 jfiddle 链接 https://jsfiddle.net/adamdrover/qe2d318L/

Answer 1

您需要将页脚链接设置为“display: block”，然后它将接受宽度和高度值。

.footer-links {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}