Html 无法在移动下拉导航中滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29752882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't scroll within mobile drop down nav
提问by Olen
I am having some troubles with the mobile menu landscape, - I am unable to scroll. To clearify I ment by scrolling so I see the whole menu. When scrolling now, it stopps after a certain amount of px (the height of the header). Please minimize the window so it looks like mobile landscape if you want to take a look by yourself.
我在移动菜单方面遇到了一些麻烦 - 我无法滚动。通过滚动来清除我，以便我看到整个菜单。现在滚动时，它会在一定数量的 px（标题的高度）后停止。如果您想自己查看，请将窗口最小化，使其看起来像移动风景。
As the image shows, you are not able to see the the whole menu.
如图所示，您无法看到整个菜单。
The problem is the following:
问题如下：
header {
position: fixed;
}
It needs to be fixed, but I must be able to scroll. Any suggestions?
它需要修复，但我必须能够滚动。有什么建议？
I have tried to remove some part of the code to make it easier to understand.
我试图删除部分代码以使其更易于理解。
HTML
HTML
<header class="nav-down">
<nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
<section class="si-icons si-icons-default">
<span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
</section>
</button>
<div id="navbar-brand-cont">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="Aarseth-Navbar">
<ul class="nav navbar-nav">
<?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
</ul>
</div>
</nav>
</header>
CSS
CSS
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.nav-up {
top: -120px;
}
.navbar-fixed-top {
position: absolute;
}
.nav-menu {
margin-top: 90px;
padding-bottom: 25px;
}
@media screen and (max-width: 767px) {
header {
height: 100px;
}
.site-navigation ul {
display: block;
}
#Aarseth-Navbar ul li {
clear: both;
margin-left: 0;
float: none;
display:block;
margin-top: 15px;
padding-bottom: 15px;
}
.navbar-collapse {
height: auto;
max-height:none;
margin-top: 20px;
padding-left: 0;
padding-right: 0;
}
#Aarseth-Navbar {
overflow: hidden;
}
.navbar-nav {
width: 100%;
}
.menu-hovedmeny-container {
padding-top: 0px;
}
.nav-menu {
padding-left: 0px;
padding-bottom: 0px;
}
.site-navigation ul {
width: 100%;
}
.menu-hovedmeny-container {
padding-right: 0px;
}
.navbar-brand {
padding-bottom: 0px;
}
.sub-menu {
display: block;
width: 100%;
position: relative;
}
.navbar-collapse {
max-height: none!important;
}
}
If you want to take a look: http://goo.gl/GZaM5K
如果你想看看：http: //goo.gl/GZaM5K
Note: I am working on fixing the menu icon right now, so if you don't see it, press at the right corner where it's naturally that the hamburger/menu icon is. The href works, its just the svg that I am having some troubles with.
注意：我现在正在修复菜单图标，所以如果你没有看到它，请按右侧的角落，那里自然是汉堡包/菜单图标。href 有效，它只是我遇到一些麻烦的 svg。
Please ask if something is unclear.
请询问是否有不清楚的地方。
回答by doc holiday
If you want your mobile, drop-down nav to be scrollable you have to define a heightwith the wrapper divthat you coded to encase the mobile nav. You should define a height, and you should set overflow-yto scrolland might as well add touchscroll.
如果您希望您的移动下拉导航可滚动，您必须height使用div您编码的包装器定义一个包装器以封装移动导航。您应该定义一个高度，并且应该设置overflow-y为scroll并且还可以添加touch滚动。
#MobileMenuDivWrapper {
height: 200px;
max-height: 200px;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch; // mobile safari
}
回答by aydow
The issue for me was the heightunits (from this forum).
我的问题是height单位（来自这个论坛）。
I had to change the heightin the menu divfrom height: 100%to height: 100vh
我不得不height将菜单中的div从更改height: 100%为height: 100vh
