我希望滑入式菜单的高度能够填充移动导航栏div下方的视口。现在,它超出了它并使菜单可滚动。 高度应为:[100vh-(移动导航栏的高度)] 我该如何设置呢?
我不想分配一个固定值,因为它不会让它保持响应状态。 并且菜单应该保持绝对,因为它需要在其下面的内容上滑动。
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;
}
#hamburger{
place-self: center right;
position: relative;
}
#btnControl{
display: none;
}
.menu-burger{
width: 60px;
height: 10px;
border-radius: 10px;
background-color: #555555;
margin: 5px 0;
transition: 0.5s;
}
#menu-bar{
position: relative;
}
#menu-options{
display: grid;
grid-template-rows: repeat(4, 1fr) ;
position: absolute;
top: 0%;
left: -100%;
width: 100vw;
max-width: 100vw;
height: -webkit-fill-available;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
background-color: gray;
transition: 0.5s;
}
#menu-options li{
padding: 1em 0;
display: flex;
justify-content: center;
align-items: center;
}
<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>
答案 0 :(得分:2)
您可以使用height
和offsetHeight
来设置resize event
。将此JavaScript
添加到您的代码中:
window.onresize = applyMenuHeight; // everytime page resizes, run this function
applyMenuHeight(); //run the function once at least
function applyMenuHeight() {
var menuHeight = document.querySelector('#mobile-menu').offsetHeight; // get menu height
document.querySelector('#menu-options').style.height = "calc(100vh - " + menuHeight + "px)"; // set the height dynamically
}
它将存储菜单height
,为您应用菜单并将其从100vh
中减去,并在每次window
调整大小时进行更新。
答案 1 :(得分:1)
您只需要在菜单中设置最小高度即可。
min-height : calc(100vh - [height of your navbar]);
以您的情况
#menu-options{
min-height: calc(100vh - 50px);
}
我已经添加了编辑的代码,您可以在此处查看。 希望对您有帮助。