Question

什么是崩溃引导菜单（移动）获得100％高度的最佳方法。

.navbar-collapse {max-height：100％！important;最小高度：100％！重要;身高：100％;}

不是真的在这里工作

Answer 1

您可以尝试使用vh CSS unit：

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

<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

这样就可以了！

.navbar-collapse { 
    max-height: 100% !important; 
}

Answer 5

我意识到这是一个较老的问题，但没有一个答案完全适用于我。有效的CSS是在navbar-nav：

上设置完整高度

.navbar-nav {
     float: none!important;
     margin-top: 7.5px;
     height: 100vh;
}

https://www.bootply.com/EGHMYmOz2e

Answer 6

...所有html之前的父元素必须具有高度：100％应用于它们才能工作...

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

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

Answer 7

与@jteks回答相似，它对我有用：

.navbar-collapse {
    max-height: none;
}

.navbar-collapse.collapse {
    transition: height 0.2s;
}

.navbar-collapse.collapsing {
    height: 0 !important;
}

.navbar-collapse.collapse.in {
    height: 100vh;
}

Answer 8

如果某人正面临着一个高度冲击，可以看到想要的导航栏高度一会儿，然后将高度恢复为默认值，那么他们可以尝试使用js来设置高度。

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');

        navbarCollap.on('shown.bs.collapse', function(x) {
            navbarCollap.addClass('make-full');
        });
        navbarCollap.on('hidden.bs.collapse', function(x) {
            navbarCollap.removeClass('make-full');
        });

这是我的make-full课，在navbar-collapse上有动画

@keyframes full-it{
    from { height: 50vh}
    to { height:100vh}
}

.navbar-collapse.make-full {
    animation-name: full-it;
    animation-duration: 0.1s;
    /*animation-delay: 0.4s;*/
    animation-fill-mode: forwards;
}

尽管我承认这不是一个很好的解决方案，但总比没有好，而且我愿意接受建议。如果有人知道更好的方法，请分享。

Answer 9

.navbar-nav {
    height: 100vh;
}

如果.navbar-collapse没有用少量菜单项“很好地”制作动画，请尝试使用navbar-nav。

p.s。不要忘记仅在移动视图上应用-媒体查询

Answer 10

执行此操作的最佳方法是确保将其设置在css文件中的正确媒体属性中

在CSS文件中添加：

@media (max-width: 768px){ 
   .navbar-collapse { 
      height:100% !important; 
      background-color:#292929; /*to change the background if you desire*/
   } 
}

Bootstrap 3移动菜单100％高度

10 个答案: