Html 绝对定位的父项的子div未占据页面的全部高度

我在一个项目中遇到了一个bug

当移动菜单的高度小于768px时，我想获取视口的完整高度，但它没有高度，即使我将其设置为100%

仅当使用汉堡图标切换时，它才会显示在视图中

nav

元素是绝对定位的，移动菜单是

nav

元素的最后一个子元素

nav

元素位于绝对位置，因此背景是透明的，其下方的

部分可以位于页面顶部

我希望带有class
mobile\u链接的
div
在移动设备上切换时占据页面的整个高度

我有一个解决办法，就是将
导航
下方
部分的
位置
属性设置为
相对
，并设置
顶部：-40px

我必须将
nav
元素的
position
属性设置为
static
，这样才能工作

但是，我不喜欢这样做，因为它在页面上的两个
部分
元素之间留有空间

是否有一种方法可以使移动菜单具有100%的高度，而不必更改我目前拥有的
位置
属性

以下是我正在谈论的页面的链接：
要解决您的
身高：100%
问题，请查看以下帖子：




或者，使用
高度：100vh

根据规范：


视口百分比长度与视口的大小有关
初始包含块。当初始值的高度或宽度
包含块发生更改时，它们将相应地缩放


vw单位-等于初始包含块宽度的1%
vh单位-等于初始容器高度的1%
街区
vmin单位-等于
vw
或
vh
中的较小者
vmax单位-等于
vw
或
vh
中的较大者

（除IE 9、10和11外，主要浏览器几乎完全支持视口单元，Edge不支持
vmax
）
使用jquery进行此项工作：有一个示例，我曾将一个部分的高度设置为屏幕的100%（取决于观看页面的设备，它将执行或多或少的高度，因此它是响应性的）


$（文档）.ready（函数（e）{
var wheight=$（窗口）.height（）；
$（'.section'）.css（“最小高度”，wheight）；
});

希望有帮助

<script>
$(document).ready(function(e) {
    var wheight = $(window).height();
    $('.section').css("min-height", wheight);
});
</script>