Geschwister div zeigt nicht mit 100% Höhe

Question

Ich erstelle ein swipeable Menü und es funktioniert bis auf einen Aspekt. Ich möchte, dass das Menü jederzeit eine Höhe von 100% hat. Egal wie weit der Benutzer auf der Seite gescrollt hat. Wenn ich es jedoch auf height: 100%; einstelle, wird das Menü nicht überstreichen. Es scheint nur zu funktionieren, wenn die Höhe auf height: 100vh eingestellt ist, aber wie Sie in meiner Geige sehen werden, schob dies die #main Div den Bildschirm nach unten. Ich möchte, dass das Hauptdiv ganz oben ist und sich das Menü darüber öffnet.

Bitte beachten Sie, dass Sie nach links, um Swipe haben das Menü zu öffnen:

You can see the example here

ich es bin zu wollen, wie diese zu öffnen:

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>

Answer 1

Warum auf der body die Swipe nicht erkennen und die .box eine fixed Position geben.

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

Oder als jsFiddle

Answer 2

Ich habe nicht versucht, aber ein etwas anderer Ansatz, die funktionieren könnte:

.box-parent 
{ 
position:relative; 
} 

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

Answer 3

Ihren Code ein wenig Gereinigt bis zu einig unnötigen Elementen und Stile zu entfernen. Dies wird besser mit position: absolute; erreicht, so dass das Menü Ihren Inhalt überlappt und nicht Teil des Dokumentflusses ist.

JSFiddle Aktualisiert: https://jsfiddle.net/ua7q6uks/

Answer 4

Hier ist ein voll funktionsfähiges ein, wo JS swipeleft und swiperight Show und die div verbergen, respectively. Diese werden auf HTML ausgeführt und .box hat eine feste Positionierung. Auch ein bisschen aufgeräumt und eine Überblendung für Looks hinzugefügt.

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>