兄弟姐妹div没有显示100％的高度

Question

我正在创建一个可滑动的菜单，除了一个方面外，它正在工作。我希望菜单始终具有100％的高度。无论用户在页面上滚动多远。但是，每当我将其设置为height: 100%;时，菜单都不会滑过。它只在高度设置为height: 100vh时才起作用，但正如您将在我的小提琴中看到的那样，这会将#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

Answer 2

我还没试过这个，但是可能会有一些不同的方法：

.box-parent
{
position:relative;
}

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

Answer 3

这是一个功能齐全的版本，JS swipeleft和swiperight分别显示和隐藏div。这些是在html上执行的.box具有固定的定位。 还清理了一下并为外观添加了过渡。

https://jsfiddle.net/ZheerH/43kjns4d/13/

$(function(){

$( 'html' ).on( "swipeleft", function() { 
$('.box').addClass( "swipeleft" );
});

$( 'html' ).on( "swiperight", function() { 
$('.box').removeClass( "swipeleft" );
});

});

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

html, body { padding: 0; margin: 0; }
div.box {
    width: 50vw;
    height: 100vh;
    background: lightblue;
    position:fixed;
    left:100vw;
    top:0;
    z-index:999;
    transition:left 0.6s ease;
 }
 div.box.swipeleft {
    left:50vw;
 }
 #main {
    height: 800px;
    width: 100vw;
    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 class="box"></div>

<div id="main"></div>