twitter-bootstrap Bootstrap 3 移动菜单 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26660549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 mobile menu 100% height
提问by niksos
Whats the best method for getting 100% height for collapse bootstrap menu (mobile).
什么是折叠引导菜单（移动）获得 100% 高度的最佳方法。
.navbar-collapse { max-height: 100% !important; min-height: 100% !important; height: 100%;}
.navbar-collapse { max-height: 100% !important; 最小高度：100%！重要；高度：100%；}
is not really working here
不是真的在这里工作
回答by cvrebert
回答by jteks
.navbar-collapse.collapse {
transition: height 0.2s;
}
.navbar-collapse.collapsing {
height: 0 !important;
}
.navbar-collapse.collapse.in {
max-height: none;
height: 100vh;
}
回答by JKL
None of the previous answers worked for me. My .navbar-collapsehas position: fixed;but I assume this is also the case for the original question.
以前的答案都不适合我。我.navbar-collapse有，position: fixed;但我认为原始问题也是如此。
The key to solve this was to have the child element of .navbar-collapseto have height: 100vh.
要解决这个问题的关键是拥有的子元素.navbar-collapse有height: 100vh。
Note: I'm using Bootstrap 4, so collapse.inis now collapse.show.
注意：我使用的是 Bootstrap 4，collapse.in现在也是collapse.show。
HTML code:
HTML代码：
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
(S)CSS:
(S)CSS:
.navbar-collapse {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.navbar-collapse.collapse.show {
height: 100vh;
}
.navbar-nav {
height: 100vh;
}
回答by Zim
I realize this is an older question, but none of the answers completely worked for me. The CSS that works is to set full height on the navbar-nav:
我意识到这是一个较旧的问题，但没有一个答案完全适合我。有效的 CSS 是在 上设置全高navbar-nav：
.navbar-nav {
float: none!important;
margin-top: 7.5px;
height: 100vh;
}
回答by UXTY
This will do the trick!
这将奏效！
.navbar-collapse {
max-height: 100% !important;
}
回答by scooterlord
...all the parent elements up to html must have height:100% applied to them in order to work...
...直到 html 的所有父元素都必须应用 height:100% 才能工作...
html,
body,
#possibleparentelem {
height:100%;
}
edit: also in some browsers has to be applied at the top of the document in order for it to work properly
编辑：在某些浏览器中也必须应用在文档的顶部才能使其正常工作
回答by Junaid
If someone is facing the height jerk where one can see the desired navbar height for a moment and then height goes back to default, those can try to set the height using js.
如果有人正面临着高度混蛋，在那里人们可以看到所需的导航栏高度，然后高度恢复为默认值，则可以尝试使用 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');
});
and this is my make-fullclass with an animation on navbar-collapse
这是我的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;
}
Although I admit this is not a very nice solution but it's better than nothing & I'm open to suggestions. If someone knows a better way, please do share.
虽然我承认这不是一个很好的解决方案，但总比没有好，我愿意接受建议。如果有人知道更好的方法，请分享。
回答by Lukas
.navbar-nav {
height: 100vh;
}
If .navbar-collapse doesn't animate "nicely" with small amount of menu items try navbar-nav instead.
如果 .navbar-collapse 不能用少量菜单项“很好地”制作动画，请尝试使用 navbar-nav。
p.s. Don't forget to apply only on mobile view - media query
ps 不要忘记仅适用于移动视图 - 媒体查询
回答by aleixfabra
回答by jfindley
The best way to do this is to ensure that its is set in the correct media property in your css file
执行此操作的最佳方法是确保在 css 文件中的正确媒体属性中设置它
in your CSS file add:
在您的 CSS 文件中添加：
@media (max-width: 768px){
.navbar-collapse {
height:100% !important;
background-color:#292929; /*to change the background if you desire*/
}
}
