jquery - 同级 div 未显示 100% 高度

Question

我正在创建一个可滑动的菜单，它可以正常工作，但有一个方面除外。我希望菜单始终具有 100% 的高度……无论用户在页面上向下滚动多远。但是，每当我将其设置为 height: 100%; 时，菜单都不会滑过。它似乎只在高度设置为 height: 100vh 时起作用，但正如您将在我的 fiddle 中看到的那样，这将 #main div 推到了屏幕下方。我希望主 div 位于最顶部，并在其上方打开菜单。

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

You can see the example here

我希望它像这样打开:

html, body {
  padding: 0; margin: 0;
}
div.box-parent {
  height: 100vh;
  /*height: 100%;*/
}
div.box {
  width: 50%;
  height: 100%;
  background: #108040;
  margin-left: -101%;
}
div.box.swipeleft {
  background: #7ACEF4;
  margin-left: 50%;
}
#main {
  height: 800px;
  width: 100%;
  background: green;
}

<div class="box-parent">
  <div class="box"></div>
</div>
<div id="main"></div>

$(function(){
  $( "body" ).on( "swiperight", swiperightHandler );

  function swiperightHandler( event ){
    $('.nav-panel').addClass( "swiperight" );
  }
});
$(function(){
  $( "body" ).on( "swipeleft", swipeleftHandler );

  function swipeleftHandler( event ){
    $('.nav-panel').addClass( "swipeleft" );
  }
});
$.mobile.loading().hide();

Answer 1

为什么不检测 body 上的滑动并给 .box 一个 fixed 位置。

$(function(){
  $("body").on( "swipeleft", swipeleftHandler );
  
  function swipeleftHandler( event ){
    $('#box').addClass( "swipeleft" );
  }
  
});

$.mobile.loading().hide();

html, body { padding: 0; margin: 0; min-height:100%;}
 #box {
    width: 50%;
    height: 100%;
    background: #108040;
    position:fixed;
    z-index:10;
    top:0; bottom:0;
    left:100%;
  }
  #box.swipeleft {
    background: #7ACEF4;
    left: 50%;
  }
  #main {
    height: 800px;
    width: 100%;
    background: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="box"></div>
<div id="main"></div>

或作为 jsFiddle