Filling height of page with position absolute - html

Question

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.
<header className ={styles.header}>
<span className={styles.header__item} onClick={() => handleTab(1)}>Library</span>
<div className={styles.img} onClick={()=>handleOptions()}>
</div>
<input className={styles.search} type ="text" placeholder="Search"></input>
<PlayerModal open={playerOpen}/>
</header>
.modalStyles{
min-height: 100vh;
width: 26vw;
position: absolute;
left: 74%;
top: 100%;
background-color: whitesmoke;
}

Answer 1

you can use position sticky instead of absolute and set top of this At the bottom of the nav.
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 70px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div id="wrapper">
<div id="sticky">
sticky
</div>
</div>
<br />
<div class="extra"></div>