title: stretch mobile menu to full screen height
body: <p>currently I have this mobile menu</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(() =&gt; {
    $("#btnMenu").click(() =&gt; {
      toggleMenu();
    });
  
    $(".navbarLink").click(() =&gt; {
      if ($("#navbarItems").hasClass("activeNavbar")) {
        toggleMenu();
      }
    });
  });
  
  function toggleMenu() {
    $("#navbarItems").toggleClass("activeNavbar");
    toggleMenuBtn();
  }
  
  function toggleMenuBtn() {
    $("#btnMenu").toggleClass("activeMenuBtn");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.link {
    text-decoration: none;
  }
  
  body {
    margin: 0;
  }
  
  #navbar {
    height: 60px;
    top: 0;
    padding-left: 200px;
    padding-right: 200px;
    position: sticky;
    background: #1e222a;
  }
  
  #navbarItems {
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  #logoLink {
    display: flex;
    align-items: center;
  }
  
  #navbarItems .navbarItemContainer:not(:first-child) {
    margin-left: 30px;
  }
  
  .navbarItemContainer {
    background: #1e222a;
  }
  
  .navbarLink {
    font-weight: bold;
    color: #ffffff;
  }
  
  .navbarLink:hover {
    color: #3abcf3;
  }
  
  #btnMenuContainer {
    height: 100%;
    display: none;
  }
  
  #btnMenu {
    cursor: pointer;
  }
  
  .menuBtnBar {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    background-color: #ffffff;
    transition: 0.4s;
  }
  
  .activeMenuBtn #barTop {
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .activeMenuBtn #barCenter {
    opacity: 0;
  }
  
  .activeMenuBtn #barBottom {
    transform: rotate(45deg) translate(-8px, -8px);
  }
  
  @media(max-width: 1200px) {
    #navbar {
      padding-left: 150px;
      padding-right: 150px;
    }
  }
  
  @media(max-width: 1100px) {
    #navbar {
      padding-left: 0;
      padding-right: 0;
    }
    #navbarItems .navbarItemContainer:not(:first-child) {
      margin-left: 0;
    }
    #navbarItems .navbarItemContainer:not(:last-child) {
      border-bottom: 1px solid #676767;
    }
    #btnMenuContainer {
      display: flex;
      align-items: center;
    }
    #btnMenu {
      margin-left: 20px;
    }
    #navbarItems {
      margin-left: 0;
      display: none;
    }
    #logoLink {
      display: inline-block;
    }
    .navbarItem {
      width: 100%;
      text-align: center;
    }
    #navbarItems.activeNavbar {
      display: block;
    }
    .navbarLink {
      width: 100%;
      height: 100%;
      display: inline-block;
      padding: 30px 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="navbar"&gt;
    &lt;div id="btnMenuContainer"&gt;
      &lt;div id="btnMenu"&gt;
        &lt;div id="barTop" class="menuBtnBar"&gt;&lt;/div&gt;
        &lt;div id="barCenter" class="menuBtnBar"&gt;&lt;/div&gt;
        &lt;div id="barBottom" class="menuBtnBar"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="navbarItems"&gt;
      &lt;div class="navbarItemContainer"&gt;
        &lt;div class="navbarItem"&gt;
          &lt;a id="logoLink" class="link navbarLink" href="#"&gt;
            &lt;img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="navbarItemContainer"&gt;
        &lt;div class="navbarItem"&gt;
          &lt;a class="link navbarLink" href="#sectionTwo"&gt;
                      Link 2
                  &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="navbarItemContainer"&gt;
        &lt;div class="navbarItem"&gt;
          &lt;a class="link navbarLink" href="#sectionThree"&gt;
                      Link 3
                  &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and I want to stretch the mobile menu to full width. So I would have to calculate the height for each link based on the amount of links.</p>
  
  <p>Given a screen height of 100% and the amount of n links I think the height per link would be</p>
  
  <blockquote>
    <p>100% / n - (menubarHeight / n)</p>
  </blockquote>
  
  <p>how can I setup my CSS that each link takes this height? I just want to divide the pages height by the amount of links.</p>
  
  <p><a href="https://i.stack.imgur.com/2eULH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2eULH.png" alt="menu"></a></p>
  
  <p>You can see a desired mobile menu example on this page</p>
  
  <p><a href="https://www.thenativeweb.io/#" rel="nofollow noreferrer">https://www.thenativeweb.io/#</a></p>
  
  <p>Within my <code>@media(max-width: 1100px)</code> the the bottom I think I have to change the padding here</p>
  
  <pre><code>  .navbarLink {
      width: 100%;
      height: 100%;
      display: inline-block;
      padding: 30px 0;
    }
  </code></pre>
  
  <p>How do I setup a full height menu?</p>