-2

I had problem with a element does not want to take width or even height as 100% I try everything but in inspect tell me that it is always have width 100% and height 100% in inspect and real value i do not know where it come from, I use bootstrap 4 but i do not think that it effect this problem

html as inside navbar element was made by bootstrap I have this and here is code of css that I used with this part of navbar and html and body was already set to height: 100% even min height is 100%.

._nvs{
    width: 100px;
    height: 80%;
    position: fixed;
    top: 20%;
    left: 0%;
    display: block;
}
._a_img{
    height: 100%;
    width: 100%;    
}
._n{
    height: 100%;

}
.hm-20{ 
    height: 25%;
}
.hm-20 div{
     height: 100%;
     position: relative;
}
.hm-20 div a{
     width:100%;
     height: 100%!important;
}
<div class="collapse navbar-collapse _nvs bg-dark" id="collapsibleNavbar">
 <ul class="nav navbar-nav flex-column _n">
    <li class="nav__item hm-20">
        <div class="container ">
          <a href="#1" class="nav__link c-blue _a_img " ><img class="align-items-center" src="img/home-icon.png" alt=""></a>
         </div>
    </li>

    <li class="nav__item hm-20">
        <div class="container">
          <a href="#2" class="nav__link c-yellow _a_img" ><img src="img/about-icon.png" alt=""></a>
        </div>
    </li>
    <li class="nav__item hm-20">
         <div class="container">
          <a href="#3" class="nav__link c-red _a_img" ><img src="img/projects-icon.png" alt=""></a>
         </div>
    </li>

    <li class="nav__item hm-20">
         <div class="container">
          <a href="#4" class="nav__link c-green _a_img" ><img src="img/contact-icon.png" alt=""></a>
          <div style="clear:both"></div>
        </div>
    </li>
  </ul>
</div>

I want just to control width and height of element a even I can not change by set it as 100 px it does not work.

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
watcher
  • 11
  • 4

1 Answers1

1

Your a tag should be a block element. a tag by default is inline element.