要素のオーバーフローを自動化するにはどうしたらいいですか？

Question

フィドルhere

私はそうなるようにしようとしているそのメニューは私がではなく、体内のメニューが閉じられるまで、メニュー内をスクロールすることができます100％以上の高さである場合。

body.menu-open { 
    overflow: hidden; 
} 

とメニューのスタイル：：

.navbar .menu { 
    position: fixed; 
    width: 30%; 
    height: auto; 
    min-height: 150%; /* height greater than 100% */ 
    overflow: auto; 
    top: 50px; 
    left: -30%; 
    background-color: DeepSkyBlue; 
    transition: left 0.2s ease-in-out; 
} 

Answer 1

100%に変更min-heightとメニューに100%でmax-heightを追加します。

.navbar .menu { 
    position: fixed; 
    width: 30%; 
    height: auto; 
    min-height: 100%; 
    max-height: 100%; 
    overflow: auto; 
    top: 50px; 
    left: -30%; 
    background-color: DeepSkyBlue; 
    transition: left 0.2s ease-in-out; 
} 

メニューが開いている

は、私は、次の適用します

$('.navbar .fa-bars').on('click', function() { 
 
\t $('body').toggleClass('menu-open'); 
 
\t $('.navbar .menu').toggleClass('in'); 
 
});

body { 
 
    min-height: 100%; 
 
    height: 1000px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body.menu-open { 
 
    overflow: hidden; 
 
    
 
} 
 

 
.navbar { 
 
    height: 50px; 
 
    background-color: royalblue; 
 
    display: flex; 
 
    align-items: center; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.navbar .fa-bars { 
 
    color: #fff; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
} 
 

 
.navbar .menu { 
 
    position: fixed; 
 
    width: 30%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    max-height: 100%; 
 
    overflow: auto; 
 
    top: 50px; 
 
    left: -30%; 
 
    background-color: DeepSkyBlue; 
 
    transition: left 0.2s ease-in-out; 
 
} 
 

 

 
.navbar .menu.in { 
 
    left: 0; 
 
} 
 

 

 

 
.navbar .menu a { 
 
    color: #fdfdfd; 
 
    text-decoration: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> 
 
    <div class="menu-icon"> 
 
    <i class="fa fa-bars fa-2x"></i> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul class="nav"> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
      <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
     <li><a href="#">Item</a></li> 
 
    </ul> 
 
    </div> 
 
</div>