在小屏幕上显示完整的导航栏

Question

虽然点击十字按钮导航栏是可见的，但在小屏幕导航栏中1000px不是html overflow is hidden。如何在不删除溢出的情况下显示导航栏的完整高度：隐藏图像部分 这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

编辑：

在div＃nav2中添加#nav并为scren更改#nav height。       #nav {overflow-y：scroll; }       ＃NAV2 {高度：1000像素}