title: Filling height of page with position absolute
body: <p>How would I position a div to take up 100% of the page height even when the page has a scroll bar and I scroll to the bottom. My div is a modal and is positioned under a navbar, I set the min-height to 100vh, but it doesn't seem to expand to the bottom of the page when I scroll down. I'm using position absolute not fixed because, I want it to be relative to the navbar.</p>
  <pre><code>    &lt;header className ={styles.header}&gt;
      &lt;span className={styles.header__item} onClick={() =&gt; handleTab(1)}&gt;Library&lt;/span&gt;
      &lt;div className={styles.img} onClick={()=&gt;handleOptions()}&gt;                   
      &lt;/div&gt;  
      &lt;input className={styles.search} type =&quot;text&quot; placeholder=&quot;Search&quot;&gt;&lt;/input&gt; 
      &lt;PlayerModal open={playerOpen}/&gt;
      &lt;/header&gt; 
  
  
  .modalStyles{
      min-height: 100vh;
      width: 26vw;
      position: absolute;
      left: 74%;
      top: 100%;
      background-color: whitesmoke;
  }
  </code></pre>