Jquery 兄弟div未显示为100%高度

我正在创建一个可切换菜单，除了一个方面外，它正在工作。我希望菜单始终具有100%的高度..无论用户在页面上向下滚动多远。但是，每当我将其设置为

height:100%菜单将不会滑动。它似乎只在高度设置为
height:100vh
时才起作用，但正如您在我的小提琴中看到的那样，这将
#main
div推到了屏幕下方。我希望主div在最上面，菜单在上面打开

请注意，您必须向左滑动才能打开菜单：


我希望它能像这样打开：



html，正文{
填充：0；边距：0；
}
div.box-parent{
高度：100vh；
/*身高：100%*/
}
分区箱{
宽度：50%；
身高：100%；
背景：#108040；
左边缘：-101%；
}
div.box.swipeleft{
背景：7ACEF4；
左边距：50%；
}
#主要{
高度：800px；
宽度：100%；
背景：绿色；
}
我没有尝试过这一点，但可能会采用一种稍微不同的方法：

.box-parent
{
position:relative;
}

.box
{
position:absolute;
top:0;
bottom:0;
left:0
right: /*fixed width here; try 50% */
}

稍微清理一下代码，删除一些不必要的元素和样式。使用
position:absolute可以更好地实现这一点，因此菜单与您的内容重叠，并且不是文档流的一部分

更新的JSFIDLE:
为什么不检测
主体上的滑动
，并给
.box
一个
固定的位置


$（函数（）{
美元（“正文”）。在（“swipeleft”，swipeleftHandler）上；
函数swipeleftHandler（事件）{
$（'#box'）.addClass（“swipeleft”）；
}
});
$.mobile.load（）.hide（）
html，正文{填充：0；边距：0；最小高度：100%；}
#盒子{
宽度：50%；
身高：100%；
背景：#108040；
位置：固定；
z指数：10；
顶部：0；底部：0；
左：100%；
}
#开关柜{
背景：7ACEF4；
左：50%；
}
#主要{
高度：800px；
宽度：100%；
背景：绿色；
}
这是一个功能齐全的示例，其中JS swipeleft和swiperight分别显示和隐藏div。这些是在html上执行的，并且.box具有固定的位置。
还清理了一点，增加了外观过渡



$（函数（）{
$（'html'）。在（“swipeleft”，function（）{
$（'.box'）.addClass（“swipeleft”）；
});
$（'html'）。在（“swiperight”，function（）{
$（'.box'）.removeClass（“swipeleft”）；
});
});
$.mobile.load（）.hide（）
html，正文{填充：0；边距：0；}
分区箱{
宽度：50vw；
高度：100vh；
背景：浅蓝色；
位置：固定；
左：100vw；
排名：0；
z指数：999；
过渡：左0.6s缓解；
}
div.box.swipeleft{
左：50vw；
}
#主要{
高度：800px；
宽度：100vw；
背景：绿色；
}

问题是，nav（框父元素）必须是main的同级元素。@Paul有什么特别的原因吗？如果是这种情况，
.box父项
将始终重叠
#main
并拦截任何单击，从而阻止您与
#main
中的内容交互。通常，滑出菜单与内容位于同一父容器中。
#main
只是内容的一部分。“我的菜单”是destop视口中页面上的固定元素。然后我有不同的部分一直到页面。菜单不能仅在一个部分中。这更像是页面的实际情况。@Paul这里是正确的方法，然后：@Paul它可以工作，但是
。导航面板
在其他内容后面。它只需要一个大于主要内容的
z-index
。添加
.nav面板{z-index:10；}
，它就会工作。非常感谢您的检查！我真的很感激！你知道为什么当我添加了更多的javascript以便能够通过滑动关闭它时，为什么这只工作一次？我的意思是我可以swipeleft和swiperight一次，但之后它就不会继续滑动了。顺便说一句，我在我的问题中添加了新的javascript。我想是因为你给了
.nav panel
swipeleft和swiperight类。在swiperight上，您应该删除swipeleft类。例如
$（'.nav panel'）.removeClass（“swipeleft”）