title: how to make div 100% height relative to screen, if div has `top` property
body: <p>My <code>div</code> block has a <code>top='70px'</code> property. When <code>div</code> has a scroll, his also moves down, and the end of the scroll is not visible.<br />
  I added the following properties to the div, but it did not help:</p>
  <pre><code>div {
      max-height: 100vh;
      overflow: auto;
  }
  </code></pre>
  <p>Example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *::before, *::after {
      padding: 0;
      margin: 0;
      border: 0;
      box-sizing: border-box;
  }
  
  div {
      position: fixed;
      top: 70px;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      padding: 30px 30px 30px 30px;  
      max-height: 100vh;
      overflow: auto;
  }
  
  div::before {
    content: "";
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 70px;
    background-color: #222;
    z-index: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Section #1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Section #2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Section #3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Page #6&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>