我正在创建一个可滑动菜单,除了一个方面之外它正在工作。我希望菜单的高度始终为 100%。无论用户在页面上滚动了多远。但是,每当我将其设置为 height: 100%;
时,菜单将不会滑过。它似乎只有在高度设置为 height: 100vh
时才起作用,但正如您在我的 fiddle 中看到的那样,这将 #main
div 推到了屏幕下方。我希望主 div 位于最顶部,并且菜单在其上方打开。
请注意,您必须向左滑动才能打开菜单:
我希望它像这样打开:
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();
最佳答案
为什么不检测 body
上的滑动并给 .box
一个固定
位置。
$(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
关于jquery - 兄弟 div 未以 100% 高度显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40939897/