如何制作<a> tag take 100% height of </a> <li> <a> element

Question

I am struggling to make my <a> take 100% height of <li> element and i want to do this because when i hover over <a> i want it to get background color and to change its color to white.

this is how it should look like

我尝试过<a> height:100%

但这是我的结果

在第二张照片上我剪下了这张照片并将其放大，这样你们就可以看得更清楚了

我在其他堆栈溢出线程中找到了一个答案，您可以在其中提供<ul> display:table并提供height:0，然后提供<li> height:100%但它不起作用对我来说。

请注意我使用BOOTSTRAP 4.0.0alpha和SASS（SCSS）

HTML

<div class="topContact hidden-md-down">
        <div class="container">
            <div class="row">
                <ul class="contactInfo">
                    <li class="d-inline-block"><a href=""><i class="far fa-envelope"></i>info@reen.com</a></li>
                    <li class="d-inline-block"><i class="fas fa-mobile-alt"></i>+00 (123) 456 78 90</li>
                </ul>

                <ul class="socialIcons ml-auto">
                    <li class="d-inline-block"><a href=""><i class="fab fa-facebook-f"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-google-plus-g"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-twitter"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-pinterest-p"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-behance"></i></a></li>
                    <li class="d-inline-block"><a href=""><i class="fab fa-dribbble"></i></a></li>
                </ul>
            </div>
        </div>
     </div>

SCSS

.topContact{
background-color: #f5f7fa;
border-bottom: 1px solid #e6e9ed;
ul{
    padding:0px 15px 0px 15px;
    margin:0;
}
a:hover{
    background: indigo;
}
a{
    height: 100%;
}
.contactInfo li,
.contactInfo a,
.socialIcons a{
    font-size: 10pt;
    color: #506a85;

}
.contactInfo a:hover{
    text-decoration: none;
    color: #00bc9c;

}
.contactInfo svg,{
    margin-right: 8px;
}
.contactInfo li{
    padding-right: 20px;
}     

}

Answer 1

为了让子元素假设父元素的高度为100％，父元素必须设置其大小。它不足以为<li>元素的<a>元素提供字体大小以扩展其高度以覆盖它。 <li>必须从其父级继承高度或定义它。此外，您的<a>元素必须是block或inline-block元素才能接受高度。

尝试：

<style type="text/css">
    ul#socialIcons, ul#socialIcons>li { margin:0px; padding:0px; list-style:none; }
    ul#socialIcons>li>a { display:block; font-size:1em; margin:0px; padding:0.5em; }
</style>

另外，我建议您查看HTML框模型的概念：https://www.w3schools.com/css/css_boxmodel.asp