时间戳

首页 > 解决方案 > 如何设置div高度以填充视口的空白区域

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

问题描述

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

标签： htmlcss

解决方案

您可以设置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时为您减去并更新它。100vhwindow

推荐阅读