Use CSS to make <a> full height of container <div> in footer - html

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

You need to make your footer-links "display: block" and then it will accept the width and height values.
.footer-links {
display: block;
margin: 0;
padding: 0;
list-style: none;
}

Answer 2

https://jsfiddle.net/qe2d318L/1/
I removed flex rules from .footer-contact and .footer-navigation, set them in the a instead, the link has become full height:
.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">
<h3>Contact Me</h3>
</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 | Privacy Policy
</div>
</footer>