引导-使菜单展开到页面高度
Bootstrap - Make the menu expand to page height
我有以下JSFiddle代码
https://jsfiddle.net/mwcf086c/.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a>
</li>
<li><a href="about.php">Profile</a>
</li>
<li><a href="about.php">About</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</div>
[使用Bootstrap并在移动模式下]
我希望当菜单展开时,它能覆盖整个页面。
见下图
有什么办法吗?
谢谢
添加height: 100vh !到。navbar-collapse中的CSS。.navbar-collapse。崩溃类
.navbar-collapse.in, .navbar-collapse.collapsing {
clear: left;
}
.navbar-collapse.in {
height: 100vh !important;
}
这里有一个小提琴:https://jsfiddle.net/L2fqzswk/1/
相关文章:
- 活动菜单 部分高度问题
- 导航菜单以不同的高度向下滚动
- HTML选择下拉菜单,最大高度为100%,大小自动
- 获取浏览器宽度和高度,包括工具栏和菜单大小
- 获取浏览器宽度和高度,不包括工具栏和菜单大小
- 我可以/应该根据下拉菜单栏的项目数量为其设置动态高度
- 标题菜单的高度增加了,但在HTML源代码中什么也没发生
- 菜单位置相对于介质查询的文档高度
- jQuery手风琴式菜单,具有动画高度
- 如何降低超级鱼菜单项目的高度
- 使用元素的高度改变页面滚动菜单的CSS
- 为什么当你再次悬停时下拉菜单动画会降低高度?
- 如何使用jquery或javascript计算浏览器菜单栏,工具栏,导航栏,书签的高度
- 在 dijit 上设置最大高度.菜单
- 如何设置最大高度,并允许滚动与jQueryUI选择菜单
- 引导-使菜单展开到页面高度
- Jquery获取子菜单的高度
- 如何使此子菜单的高度为100%
- 折叠菜单,高度问题
- 引导响应折叠子菜单在第一次折叠时有固定的高度