在小屏幕上显示全导航栏

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}