Question

我希望滑入式菜单的高度能够填充移动导航栏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>

Answer 1

您可以使用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调整大小时进行更新。

Answer 2

您只需要在菜单中设置最小高度即可。

min-height : calc(100vh - [height of your navbar]);

以您的情况

#menu-options{
min-height: calc(100vh - 50px);
}

我已经添加了编辑的代码，您可以在此处查看。希望对您有帮助。

Check the working code here

如何设置div高度以填充视口的空白区域

2 个答案: