引导移动菜单 100%

Question

我有一个很长的移动菜单，有 4 个菜单项，每个项目都有下拉菜单，第一个下拉菜单很长，当我滚动浏览我的导航时打开第一个下拉菜单，我无法到达菜单中的最后一个下拉菜单，除非我关闭第一个下拉菜单，但我希望能够到达最后一个下拉菜单，即使第一个下拉菜单是打开的。

这是 HTML

.navbar-collapse {
height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

我尝试了以下方法：

.navbar-collapse {
height: 100vh;
}

但是当第一个下拉列表打开时，我仍然无法到达最后一个下拉列表。

Answer 1

首先navbar是固定元素，因此即使它在正文元素中溢出，您也无法滚动它。

现在你给.navbar-collapse100vh高度

这么说vh = 300px

现在.navbar-collapse的高度是300px但是在消耗它之后navbar高度是350px(.navbar-header+.navbar-collapse height)，它会溢出当前身高为300px的身体元素。

现在你只能滚动.navbar-collapse不能navbar这就是第四项隐藏的原因。

您需要将.navbar-collapse的高度降低50px(.navbar-header 的高度)。

.navbar-collapse {
height: calc(100vh - 50px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
height: calc(100vh - 50px);
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 2

Bootstrap 将绝对定位放在他们的 .dropdown-menu 类上。 只需相对定位它，您应该是金色的。请参阅代码段中的修改。

.dropdown-menu{
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
height: calc(100vh - 50px);
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 3

您的问题位于选择器.navbar-collapse中，该选择器已将max-height设置为340px。要解决它，您需要首先将其覆盖到您想要的高度，然后添加!Important以覆盖现有样式。

此外，您在菜单中使用列，因此您需要记住，这会破坏一些引导样式(例如下拉菜单样式)。 这是因为选择器是如何在层次结构中配置的。因此，引导结构之外的任何内容都需要重新配置，使其对您有利(这也应用于大多数CSS框架)。

这是代码笔

我已申请

.navbar-collapse {
max-height: 90vh !Important;
height: 90vh;
}

该max-height已被任何设备上 90% 的 VH 覆盖，这将确保菜单不会超过设备高度。如您所知，大多数智能设备都具有内置的选项卡导航和位于Web浏览器顶部和底部的地址栏。因此，10%的人会处理这个问题，并使菜单正确显示。

此代码已在我的iPhone 6上试用过，并且工作正常。

Answer 4

您不需要设置高度，而是设置最大高度。 在bootstran .navbar-collapse max-height： 340px;. 对于移动设备，菜单应占据整个屏幕。

<style>
.navbar-collapse {
max-height: calc(100vh - 50px)!important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
max-height: calc(100vh - 50px)!important;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>