Div不滾動到底

Question

我有一個div問題，我想要滾動。

我的菜單是在這個div（它是全屏）this is it。當你將鼠標懸停在一個有孩子的元素上時，菜單會展開並且離開屏幕，這就是我添加滾動的原因，但它不會滾動到底部（它隱藏了最後一個菜單）。

這裏是我的CSS和HTML：

.tablet-menu { 
 
    display: none; 
 
    background: #000; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0.7; 
 
    z-index: 1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show { 
 
    display: block; 
 
} 
 
.tablet-menu-scroll { 
 
    overflow: scroll; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.tablet-menu ul { 
 
    top: 0; 
 
    bottom: 0; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tablet-menu li { 
 
    color: #FFF; 
 
    background: #000; 
 
} 
 
.tablet-menu li a { 
 
    text-transform: uppercase; 
 
    font-family: "Roboto Slab", Times, Georgia, serif; 
 
    font-weight: bold; 
 
    border-radius: 2px; 
 
    border-bottom: 1px solid white; 
 
    position: relative; 
 
    display: block; 
 
    padding-top: 4%; 
 
    padding-bottom: 4%; 
 
}

<div class="tablet-menu"> 
 
    <ul class="tablet-menu-scroll"> 
 
    <?php wp_nav_menu(array ('theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s')); ?> 
 
    </ul> 
 
</div>

對不起，PHP我的工作WordPress的，我寫我的菜單的副本，但沒有真正的頁面名稱。

在那裏，它是：click

我真的不知道問題出在哪裏。

Answer 1

儘量減少填充頂或填充底部或兩者按您的要求是這樣的：
.tablet-menu li a { padding-top: 3%; padding-bottom: 3%; }

Answer 2

As you want it to be arranged below: 

$(function(){ 
 
    $('#show').on('click', function(){ 
 
     $('.tablet-menu').addClass('show'); 
 
    }); 
 
});

.tablet-menu{ 
 
display:none; 
 
overflow:scroll; 
 
background:#000; 
 
height:100px; 
 
width:300px; 
 
opacity:0.7; 
 
z-index:1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show{ 
 
display:block; 
 
} 
 
.tablet-menu-scroll{ 
 
height:100%; 
 
width:100%; 
 
} 
 
.tablet-menu ul{ 
 
top:0; 
 
bottom:0; 
 
position:relative; 
 
text-align:center; 
 
padding:0; 
 
margin:0; 
 
} 
 
.tablet-menu li{ 
 
color:#FFF; 
 
background:#000; 
 
} 
 
.tablet-menu li a{ 
 
text-transform: uppercase; 
 
font-family: "Roboto Slab", Times, Georgia, serif; 
 
font-weight:bold; 
 
border-radius:2px; 
 
border-bottom:1px solid white; 
 
position:relative; 
 
display:block; 
 
padding-top:4%; 
 
padding-bottom:4%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="tablet-menu"> 
 
      <ul class="tablet-menu-scroll"> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </div> 
 

 
<button id="show">Show</button>