title: How to create a fixed full-screen non-scrollable div?
body: <p>I am trying to mimic a typical modal. When a user clicks something, the modal shows up, with a transparent background that is full-screen and fixed.</p>
  <p>Currently I have this:</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>.thank-outer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(222, 222, 222, 0.7);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="thank-outer" id="thankyou"&gt; Some text &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The height of the div isn't the browser's height, but the full page content height, so it's scrollable.</p>
  <p>How to change it so that the height of the div is just the browser's height?</p>