兄弟divが100％の高さで表示されない

Question

スワイプ可能なメニューを作成していますが、1つの側面を除いて動作しています。私はメニューがいつも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

https://jsfiddle.net/ua7q6uks/はなぜbodyにスワイプを検出し、.boxfixed位置を与えていません。

$(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

。これはposition: absolute;を使用する方が良いので、メニューはコンテンツと重なり、ドキュメントフローの一部ではありません。

はJSFiddleを更新：

Answer 4

としてここでは、それぞれ、JSはswipeleft完全に機能1、および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>