Question

I have a footer with my navigation list contained. On hover, I would like to change the background color of the entire height of the div. As it is right now, only the background around the text is changing color. I have tried adding top and bottom padding to the text, but that's not having the right effect I'm looking for. Is there a way to make the <a> 100% of the height of the containing footer div?

Code below:

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>

Can anyone help? I've searched around and can't seem to find a simple solution.

EDIT: Here's a jfiddle link https://jsfiddle.net/adamdrover/qe2d318L/

Answer 1

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

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

Answer 2

https://jsfiddle.net/qe2d318L/1/

我从flex和.footer-contact删除了.footer-navigation规则，将其设置在a中，而链接已变为全高：

.footer-contact a,
.footer-navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

body {

  background: #348F50; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #348F50 , #56B4D3); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #348F50 , #56B4D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  margin: 0;
}

.clearfix:before, .clearfix:after {
  clear: both;
}

footer {
  width: 100%;
  background: #222;
  color: #fff;
  margin: 0;
  position:fixed;
  left:0px;
  bottom:0px;
}
.centered {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.footer-logo {
  width: 20%;
}
.logo {
  padding: 30px 20px 10px 20px;
  max-width: 100%;
}
.footer-contact {
  width: 15%;
  /*align-items: center;
  justify-content: center;
  display: flex;*/
}

h3 {
  margin: 0;
  text-align: center;
}

.footer-contact a,
.footer-navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.footer-navigation {
  width: 60%;
  /*display: flex;
  align-items: center;*/
}

.footer-links-holder {
  display: block;
  width: 25%;
  position: relative;
  float: left;
  margin: 0;
}

.footer-links-holder:hover {
  background-color: #444;
  transition: 0.5s;
}

.bottom-bar {
  position: relative;
  text-align: center;
  font-size: .8em;
  text-transform: uppercase;
  background: #000;
  padding: 15px 0;
}

<footer>

  <!-- include slogan, contact me form on web, contact button on mobile. Social media links on right. -->

  <div class="centered clearfix">
    <div class="footer-logo">
      <img class="logo" src="images/laptop-logo.png">
      <div class="social">
        <a href="https://www.facebook.com/" class="facebook">
        </a>
        <a href="https://twitter.com/" class="twitter">
        </a>
        <a href="https://www.linkedin.com/" class="linkedin">
        </a>
      </div>
    </div>
    <div class="footer-contact">
      <a href=""><h3>Contact Me</h3></a>
    </div>
    <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>
  </div>
  <div class="bottom-bar">
    All Rights Reserved © 2016 | <a href="">Privacy Policy</a>
  </div>

</footer>

使用CSS制作<a> full height of container </a> <div> <a> in footer

2 个答案: