Bootstrap 3移动菜单100%高度

Question

什么是崩溃引导菜单(移动)获得100%高度的最佳方法.

.navbar-collapse {max-height:100%!important; 最小高度:100%!重要; 身高:100%;}

不是真的在这里工作

Answer 1

您可以尝试使用vhCSS单元:

.navbar-collapse {
    height: 100vh;
}

Answer 2

.navbar-collapse.collapse {
    transition: height 0.2s;
}
.navbar-collapse.collapsing {
    height: 0 !important;
}
.navbar-collapse.collapse.in {
    max-height: none;
    height: 100vh;
}

Answer 3

以前的答案都不适合我。我.navbar-collapse有，position: fixed;但我认为原始问题也是如此。

要解决这个问题的关键是拥有的子元素.navbar-collapse有height: 100vh。

注意：我使用的是 Bootstrap 4，collapse.in现在也是collapse.show。

HTML代码：

<div id="main-nav" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

(S)CSS：

.navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.navbar-collapse.collapse.show {
    height: 100vh;
}
.navbar-nav {
    height: 100vh;
}

Answer 4

...html 之前的所有父元素都必须应用 height:100% 才能工作...

html,
body,
#possibleparentelem {
 height:100%;
}

编辑：在某些浏览器中也必须在文档顶部应用才能使其正常工作