Bootstrap Mobile菜单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是固定元素,所以你不能滚动它,即使它在body元素中溢出.

现在,你是给高度100vh来.navbar-collapse

说吧 vh = 300px

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

现在,你只能滚动.navbar-collapse不能navbar,这就是为什么第四项是隐藏.

你需要降低高度.navbar-collapse通过50px(.navbar头的高度).

.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>