兄弟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％

回答

相關問題