兄弟div未显示高度为100％

我正在创建一个可滑动的菜单，除了一个方面它正在工作。我希望菜单的高度始终为100％。无论用户在页面上滚动了多远。不过，无论何时将其设置为height: 100%;，菜单都不会滑动。它只在高度设置为height: 100vh时才起作用，但正如您在我的小提琴中看到的，这会将屏幕上的#main div推下。我希望主div能够处于顶端，并且可以通过菜单打开它。兄弟div未显示高度为100％

请注意，你必须向左滑动，打开菜单：

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();

来源

2016-12-02 Paul

为什么不检测的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

来源

2016-12-02 20:29:25 Moob

@Paul它可以工作，但'.nav-panel'是另一种内容。它只需要比主要内容更大的“z-index”。添加'。nav-panel {z-index：10;}'并且它会工作。 – Moob

非常感谢您的支持！我真的很感激！ – Paul

你知道为什么当我添加更多的JavaScript以便能够用刷卡关闭它时，为什么这只能工作一次？我的意思是说，我可以轻轻扫过一次，然后在它不会继续滑动。 – Paul

我没有试过，但略有不同的方法可能工作：

.box-parent 
{ 
position:relative; 
} 

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

来源

2016-12-02 20:02:53

荡涤你的代码有点去除一些不必要的元素和风格。使用position: absolute;可以更好地完成此操作，所以菜单与您的内容重叠，而不是文档流程的一部分。

更新的jsfiddle：https://jsfiddle.net/ua7q6uks/

来源

2016-12-02 20:03:50

事情是，资产净值（盒亲本）需要与主一个同级元素。 – Paul

@Paul有特别的理由吗？如果是这种情况，'.box-parent'将总是与'#main'重叠并拦截任何点击，从而阻止你与'＃main'中的内容进行交互。通常，滑出菜单与内容位于同一个父容器中。 –

'＃main'只是一段内容。我的菜单是我的页面上一个固定的元素在一个destop视口。然后，我会在页面上一直有不同的部分。菜单不能只在一个部分。这更像是页面实际上像https://jsfiddle.net/43kjns4d/6/。 – Paul

这里是一个功能齐全的一个，在那里JS swipeleft和swiperight显示和隐藏股利，分别。这些都是在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>

来源

2016-12-03 14:56:59

兄弟div未显示高度为100％

回答

相关问题