我之前也问过类似的问题，但我试图更好地澄清，因为我上一次没有得到任何回复；(谢谢
我有一个导航栏/菜单在Bootstrap中的视图"xs"视图(汉堡包按钮(中展开。
- 如何使导航栏/meny扩展到100%并在需要时变得可滚动
原始代码：
#menu1 .navbar-collapse{padding:0;}
当使用原始代码时，菜单打开到大约50%的屏幕区域，下拉菜单变得可以滚动(这很好(。
我的代码(我试图找到解决方案(：
#menu1 .navbar-collapse{padding:0; min-height:100%}
当我尝试添加上面的css时，什么都没有发生。看起来还是一样。为什么最小高度：100%不会一直往下扩展？
知道怎么解决这个问题吗？
非常感谢。/Marcus
整个菜单的CSS：
/* menu 1 - XS view */
#menu1 { background-color: #f5f5f5; min-height: 40px;}
#menu1 .navbar-collapse{padding:0; min-height: 100%;}
#menu1 .nav > li > a { color: #000; padding: 10px 15px 10px 15px; min-height: 15px; background-color: transparent; font-size:14px;}
#menu1 .nav > li:hover > a, #menu1 .nav > li.open > a { background-color:#008080; color:#fff; border-radius:3px;}
#menu1 .dropdown-menu { padding-bottom: 0; }
#menu1 .dropdown-inner { display: table; }
#menu1 .dropdown-inner ul { display: table-cell; }
#menu1 .dropdown-inner a { min-width: 175px; display: block; padding:4px 20px; clear: both; line-height: 20px; color: #333333; font-size: 12px; }
#menu1 .dropdown-inner li a:hover { color: #008080; }
#menu1 .see-all { display: block; margin-top: 0.5em; border-top: 1px solid #DDD; padding: 3px 20px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 3px 3px; font-size: 12px; }
#menu1 .see-all:hover, #menu .see-all:focus { text-decoration: none; color: #ffffff; background-color: #008080;}
#menu1 #category { float: left; font-size: 16px; line-height: 40px; color: #000; margin-left:15px;}
#menu1 .btn-navbar {font-size: 15px; font-stretch: expanded; color: #FFF; padding: 2px 18px; float: right; background-color: #008080;}
#menu1 .btn-navbar:hover, #menu1 .btn-navbar:focus, #menu1 .btn-navbar:active, #menu1 .btn-navbar.disabled, #menu1 .btn-navbar[disabled] { color: #ffffff; background-color: #000; }
@media (min-width: 768px) {
#menu1 .dropdown:hover .dropdown-menu {
display: block;
}
}
@media (max-width: 767px) {
#menu1 .navbar-nav{margin:0;}
#menu1 .in{border-top:1px dotted #bbb;}
#menu1 {
border-radius: 4px;
}
#menu1 div.dropdown-inner > ul.list-unstyled {
display: block;
}
#menu1 div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color:#fff;
}
#menu1 .dropdown-inner {
display: block;
}
#menu1 .dropdown-inner a {
width: 100%;
color: #222;
}
#menu1 .dropdown-menu a:hover, #menu .dropdown-menu ul li a:hover {
background-color:#eee;
}
#menu1 .see-all {
margin-top: 0;
border: none;
border-radius: 0;
color: #222;
}
#menu1 .see-all:hover{color: #008080;}
}
HTML:
<nav id="menu1" class="navbar-default navbar-fixed-top hidden-sm hidden-md hidden-lg">
<div class="navbar-header"><span id="category" class="visible-xs"><?php echo str_replace("Categories","Menu",$text_category);; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden-xs"><a href="<?php echo $home; ?>"><b><?php echo $text_home; ?></b></a></li>
<li><a href="/index.php?route=information/information&information_id=4"><b>About us</b></a></li>
<li><a href="/index.php?route=information/information&information_id=6"><b>Find us</b></a></li>
<!-- <li><a href="/index.php?route=information/information&information_id=8"><b>Buy or sell</b></a></li> -->
<li><a href="/index.php?route=information/contact"><b>Contact us</b></a></li>
</uL>
<ul class="nav navbar-nav">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a>
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
</div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</nav>
我找到了解决方案。它使用'vh'而不是'px'工作。视口的高度：
#menu1 .navbar-collapse{ padding:0; min-height: 70vh;}