How do I manage to make my menu-links that pop-out on mobile view take up full height of viewport? I have tried to apply 100vh with no luck

 @media only screen and (max-width: 800px) {
    .menu {     
      width: 100%;
    }
 
    .menu-items {
      display: none; 
      width:100%;
      background-color: #008378;
      position: absolute;
      text-align: center;
      z-index: 2;    
      margin-top:390px;   
      padding-top: 60px;      
  }
  

   <a class="show" href="#menu"><span class="material-symbols-outlined">
      menu
      </span></a>
      
      <a class="hide" href="#"><span class="material-symbols-outlined">
      close
      </span></a>
    
    <ul class="menu-items">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
  </ul>
  </div>
</nav>