Add Button to Bottom of Mobile Menu

How to add a button to the bottom of the Mobile Menu.

The way I'm currently implementing it,

• I'm using the last item on the Menu as my Button(after styling it with CSS)
• Have made it position Absolute and made the height of Mobile 100vh
• Now on different browsers(Safari/Chrome/Firefox) different mobiles(iPhone/Android) the actual viewable screen size is different than the Device Screen Height (100vh)
• So I have set the Bottom value of the Bottom button with an offset of 131px. However, this is giving me a white gap after the Button(my Mobile Menu background is white)

How do I set the Button to exactly sit in the Bottom with zero pixel gap after the Button?(for all mobile devices all mobile browsers)

More details:

Button is just a new Custom Menu Item added via Wordpress Menu Settings section from WP-Admin. And have applied .app-dl-button class to it.

CSS Code:

@media only screen and (max-width: 500px) and (min-width: 300px)
{
  #header{
    height: 56px;
  }

  #mainnav-mobi{
    height: 100vh;
  }

   li.app-dl-button{
    display: unset !important;
    position: absolute !important; /*adding important as conflicts with CSS in main.css*/
    bottom: 131px; /*56px is height of Header menu and 50px additional required for addressbar*/
    /*bottom: 106px;*/ /*56px is height of Header menu and 50px additional required for addressbar*/
    /*bottom: 81px;*/ /*56px is height of Header menu and 25px additional required for addressbar*/
    text-align: center !important; /*conflicts with CSS in main.css*/
    width: 100vw;
    background-color: #236df1;
  }

  li.app-dl-button:after{
      content: url(https://pathto/download-arrow.svg);
    position: absolute;
    z-index: 100000;
    left: 28vw;
    top: 15px;
  }
}