在小屏幕上顯示全導航欄

Question

雖然點擊十字按鈕導航欄是可見的，但在小屏幕導航欄不是1000px爲html overflow is hidden。如何顯示導航欄的全高不移除溢出：隱藏的圖像部分 這是我的代碼：

$('#start').click(function(){ 
 
    $('#nav').show(); 
 
    $('img').hide(); 
 
})

html{ 
 
    height:100%; 
 
    overflow:hidden; 
 
} 
 
body{ 
 
    height:100%; 
 
} 
 
#nav{ 
 
    height:1000px; 
 
    width:100%; 
 
    background:#454545; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header> 
 
    <div id="start"><h3>&#9747;</h3> 
 
    <img src="http://wallpapercave.com/wp/E0z7vJl.jpg"> 
 
</header> 
 
<div id="nav"></div>

Answer 1

你要嗎？

你可以看到https://jsfiddle.net/ag0vcn4h/2/

$('#start').click(function(){ 
 
    $('#nav').show(); 
 
    $('img').hide(); 
 
})

html{ 
 
    height:100%; 
 
    overflow:hidden; 
 
} 
 
body{ 
 
    height:100%; 
 
} 
 
#nav{ 
 
    overflow-y: scroll; 
 
    width:100%; 
 
    background:#454545; 
 
    display:none; 
 
    height:calc(100vh - 70px) // 70 px is your header height you can change 
 
} 
 
#nav2{ 
 
    height:1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<header> 
 
    <div id="start"><h3>&#9747;</h3></div> 
 
    <img src="http://wallpapercave.com/wp/E0z7vJl.jpg"> 
 
</header> 
 
<div id="nav"> 
 
    <div id="nav2"> 
 

 
    </div> 
 

 
</div>

編輯：

添加#nav一個div＃NAV2內改變#nav高度scren。 #nav {overflow-y：scroll; } ＃nav2 {height：1000px}