, показывающий полную навигационную панель на маленьких экранах

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>

EDIT:

Добавить #nav внутри сНу # NAV2 и изменить #nav высоту scren. #nav {overflow-y: scroll; } # nav2 {height: 1000px}