[SOLVED] Overflow auto does not show all content

Overflow auto does not show all content

So I'm trying to make an hamburger menu, and when the button is clicked it comes from top since it's styled as top: -100% at the beginning.

It's working fine but when its height is bigger than window height, overflow: auto makes vertical scroll so i can get to the bottom of menu.

The problem is that i cant always get to the very bottom and i dont see the bery last item, because it depends on window height.

.header__menu_mobile {
    position: fixed;
    top: -100%;
    left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    color: #252525;
    z-index: 3;
    overflow: auto;
    transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    width: 100%;
}
.header__menu_mobile .header__list li {
    width: 100%;
    padding: 20px 0;
}
.header__menu_mobile .header__list li a {
    text-decoration: none;
    color: #252525;
}
.header__menu_mobile.active {
    top: 63px;
}

<div class="header__menu_mobile">
 <div class="container">
  <ul class="header__list">
   <li><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
   <li><a href="">Item 6</a></li>
   <li><a href="">Item 7</a></li>
   <li><a href="">Item 8</a></li>
  </ul>
  <div class="contacts">
   <a class="contact">Email</a>
   <a class="contact">Instagram</a>
   <a class="contact">Facebook</dav>
  </div>
 </div>
</div>

Meybe the problem is top: 63px while menu is active, but in this layout it has to be excactly like this. When i change it to top: 0, overflow auto shows me the last item on every window height.

So meybe these 63px is also taken away from the bottom of menu. But what should i do?

Solution

Thanks for help. The problem was solved when i changed height: 100% to height: calc(100% - 63px);. Thanks @Cbroe and @DiegoD for help