android - Bootstrap CSS - 移动菜单 100% 高度不适用于 Android

Question

我有一个包含 4 个菜单项的 Bootstrap 菜单。这些元素中的每一个都有下拉菜单。通过执行以下操作，我能够使菜单变为 100% 高度:

.navbar-collapse {
  height: 100vh;
}

.dropdown-menu {
  position:relative;
}

但是，在 Android 移动设备上，这不起作用 - 如果您向下滚动它会被截断，如果您向上滚动它也会被截断。有人可以帮忙吗？如何让我的 Bootstrap 移动菜单的高度达到 100% 并且可以在所有移动平台上正确滚动？

这是下拉菜单的代码:

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

Answer 1

好吧，在查看网站后，在我看来，OP 问题不是导航栏占用 100% 高度，而是子菜单故障。

毛刺解决方案1故障的原因实际上是 Bootstrap .row 规则 margin-right: -15px; margin-left: -15px; 可能与一些溢出规则冲突。所以简单的解决方法应该是:

.dropdown-communities .row{
    margin: 0;
}

---

毛刺解决方案2:

.dropdown-communities {
    /*overflow-y: hidden; <= REMOVE THIS rule. Should solves the glitching*/
}

---

要在移动设备上使 navebar 100% 高度(来 self 之前的回答):

.navbar-collapse {
    height: 90vh; /* Set to lower value, because 
                     height = <total height> - <.navbar-header height> 
                     so you will not lose the last menu */
    max-height: 100vh!important; /* Or max-height: none!important;  */
}

这是阻止您在移动设备上获得 100% 高度的 bootstrap CSS 规则:https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L4217-L4226

---

让我重新表述一下这个问题(花了一些时间将它从 6k 行 CSS 缩小到只有 2 条 CSS 规则，参见下面的演示代码)

• 有两种滚动:内容页面滚动和菜单滚动
• 当您打开第一个菜单并将菜单滚动到底部时，子菜单将保持不可见状态，直到您滚动主内容页面为止。
• 当您到达页面底部(或滚动页面内容)时，它就会变得可见。

• 但是当您向上滚动时，第一部分是不可见的。

  不需要滚动到底部，只需要滚动页面内容强制重绘，让子菜单可见。

这里是问题演示:

可玩的源代码...(在移动设备或 chrome 中检查 Ctrl+ Shift + M)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Home</title>
    <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.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".dropdown").hover(function () {
                $(this).addClass("open")
            }, function () {
                $(this).removeClass("open")
            })
        });

    </script>

    <style type="text/css">
        .navbar-collapse {
            height: 100vh;
        }

        .dropdown-communities {
            overflow-y: hidden
        }
    </style>

</head>
<body>
<div class="navbar navbar-default 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="#">Home</a>
        </div>
        <div class="navbar-collapse collapse in" aria-expanded="true" style="">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"
                       aria-expanded="true">
                        SECTION 1
                    </a>
                    <div class="dropdown-menu dropdown-communities" role="menu">
                        <div class="row current-communities">
                            <div class="col-md-4">
                                <h4>SUB-SECTION 1</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h4>SUB-SECTION 2</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h4>SUB-SECTION 3</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                        </div>

                        <hr class="current-communities-hr">

                        <div class="row upcoming-communities">
                            <div class="col-md-4">
                                <h4>HEADER 1</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h4>HEADER 2</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h4>HEADER 3</h4>
                                <ul>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        SECTION 2
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        SECTION 3
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        SECTION 4
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>


<div style="height: 100px">Content 1</div>
<div style="height: 100px">Content 2</div>
<div style="height: 100px">Content 3</div>
<div style="height: 100px">Content 4</div>
<div style="height: 100px">Content 5</div>
<div style="height: 100px">Content 6</div>
<div style="height: 100px">Content 7</div>
<div style="height: 100px">Content 8</div>
<div style="height: 100px">Content 9</div>
</body>