title: Make absolute positioned div cover the viewport
body: <p>I'm working on a jQuery animation that have a absolute positioned div that is generated on a specific location of the viewport (<code>left: 150px</code>) and this div grows vertically and horizontally, covering the entire viewport</p>
  
  <p>But unfortunately, the div is overflowing the viewport, and not covering the entire screen</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
   function generateChild(top, bottom, left, right) {
    $("#divGenerator").append(`
     &lt;div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"&gt;&lt;/div&gt;
    `);
   }
  
   generateChild("50vh", "0", "80vw", "0");
  
   /*
   setInterval(function() {
    $(".child").animate({
     "transform": "translate3d(0, 0, 0)",
     "transition": "all 0.5s ease-out"
    }, 3000, function() {
     $(this).fadeOut().remove();
    });
   }, 1000);
   */
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   margin: 0;
   overflow: hidden;
  }
  
  #divGenerator {
   position: relative;
   height: 100vh;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   background-color: black;
   border: 1px solid black;
  }
  
  .child {
   position: absolute;
   width: 20px;
   height: 20px;
   border: 1px solid white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;Trippy Waves&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   &lt;link rel="stylesheet" href="index.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id="divGenerator"&gt;&lt;/div&gt;
  
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>