How can I adjust the height of the sliding-in menu to fill the viewport below the mobile-navbar div without extending beyond it and causing scroll bars? The desired height should be: [100vh-(height of mobile-navbar)] I want to avoid setting a fixed value to keep it responsive. Additionally, the menu needs to remain absolute for sliding over the content underneath.
function menuSlidesIn(){
var checkbox = document.getElementById("btnControl")
var menu = document.getElementById("menu-options")
if(checkbox.checked == true){
menu.style.left = "0%"
}
else{
menu.style.left = "-100%"
}
}html, body{
padding: 0;
margin: 0;
}
#mobile-menu{
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
padding: 0 2em;
margin: 0;
}
...
<div id="mobile-navbar">
<ul id="mobile-menu">
<li><a href="#">Logo</a></li>
<li id="hamburger">
<input type="checkbox" id="btnControl" onclick="menuSlidesIn()"/>
<label for="btnControl" id="label-hamburger">
<div class="menu-burger"></div>
<div class="menu-burger"></div>
<div class="menu-burger"></div>
</label>
</li>
</ul>
</div>
<div id="menu-bar">
<ul id="menu-options">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>