使 Bootstrap 导航栏下拉菜单的一部分可滚动答案

【问题标题】：Make a portion of Bootstrap navbar dropdown scrollable使 Bootstrap 导航栏下拉菜单的一部分可滚动
【发布时间】：2016-11-18 03:04:16
【问题描述】：

我的 Bootstrap 导航栏中有一个下拉菜单，其中可能包含很长的项目列表，因此它应该是可滚动的。在列表的末尾，我有一个分隔符和一个“添加新项目”条目。

我希望保持此项目列表可滚动，但我希望将分隔符和“添加新项目”条目固定在菜单底部。这样，用户可以添加一些东西，而不必一直滚动到底部。此外，如果列表太长，用户可能不会注意到该选项，因为它将隐藏在底部。

Here is what I have so far

【问题讨论】：

@CarolMcKay 感谢您的提示。你能解释为什么这很糟糕吗？我从网上的示例中提取了该代码：bootply.com/86116 它似乎对我来说很好用。此外，W3Schools 指出auto 是height 的默认值：w3schools.com/cssref/pr_dim_height.asp
好的，由于缺乏观察，我正在删除我之前的评论，我会再看看你的问题。
我们现在都好吗？

标签： css drop-down-menu twitter-bootstrap-3 scrollable

【解决方案1】：

你不需要做“高度：自动”

只需将您的下拉 li 类设为这个 css：

max-height: 000px;
overflow-x: hidden;
overflow-y: scroll;

000 = 你的服装高度 (200/300/500...)

【讨论】：

感谢您的提示，但这并不能解决我提出的问题。

【解决方案2】：

底部固定菜单项的可滚动菜单

html

<body role="document">
    <!-- navbar -->
    <nav class="navbar navbar-inverse navbar-default">
        <div class="container">
            <div class="navbar-header">
                <!-- menu button -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#menu" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- navbar collapse menu -->
            <div id="menu" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Menu <span class="caret"></span></a>
                        <<div class="scrollable-menu-container">
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li class="divider" role="separator"></li>
                            <li><div class="separateme">
                                     <a href="#"><span class="glyphicon glyphicon-plus-sign"></span>                                        Add a new item</a>
                                     </div></li>
                        </ul>
                    </li>
                </ul>
                     </div><!-- /scrollable-menu-container -->
            </div>
        </div>
    </nav> <!-- /navbar -->
</body>

css

.scrollable-menu-container {
    display:block;
    height: calc(200px + 30px);/* height of scrollable menu plus line height */
    background:Plum;
}

.scrollable-menu {
            height: auto;
            max-height: 200px;
            overflow-x: hidden;
            overflow-y: scroll;
                background:Pink;
        }

          .separateme {
            position:absolute;
            top:290px;/* push to bottom */
          }

https://jsfiddle.net/cmckay/2v41gnbv/

【讨论】：

不是我要求的方式。您的建议修复了菜单的高度。该菜单是一个 Bootstrap 下拉菜单。这不适合 Bootstrap 样式。