小さな画面で完全なナビゲーションバーを表示

Question

小さな画面のナビゲーションバーでは、小さな画面のナビゲーションバーでは1000pxと表示されません。html overflow is hiddenと表示されます。オーバーフローを削除せずにnavbarのフルハイトを表示するにはどうすればいいですか： これは私のコードです：

$('#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>

EDIT見ることができます：

のdiv＃のNAV2内#nav追加しscrenため#nav高さを変更します。 #nav {overflow-y：scroll; } ＃nav2 {height：1000px}