Div不滚动到底

我有一个div问题，我想要滚动。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

我真的不知道问题出在哪里。

来源

2016-12-13 Dako

尝试添加attiribute “溢出：滚动;”到'.tablet-menu'而不是'tablet-menu-scroll' –

不起作用;/ – Dako

删除“display：none;”和“位置：固定的”从“.tablet菜单” –

尽量减少填充顶或填充底部或两者按您的要求是这样的：
.tablet-menu li a { padding-top: 3%; padding-bottom: 3%; }

来源

2016-12-13 19:22:37 user3337667

我真的不想让我的按钮更小，有没有办法让它滚动到底部而不减小尺寸或添加其他元素？ – Dako

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>

来源

2016-12-14 07:55:10

Div不滚动到底

回答

相关问题