javascript - 菜单列表溢出 HTML(也在 iframe 中)

Question

主要问题是菜单项从页面溢出到底部。我试图解决这个问题，但我没有这样做，我真的已经精疲力竭地试图解决它。此菜单位于 iframe 中，但即使在常规页面上，问题仍然存在。问题图片如下:

这是代码

<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="roleMenu" class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul id="menuUL" class="nav navbar-nav">
                        <li{{ (Request::is('admin') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li{{ (Request::is('admin/blogs*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Pages</a></li>
                        <li{{ (Request::is('admin/comments*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-bullhorn"></span> Comments</a></li>
                        <li{{ (Request::is('admin/menuBuilder*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-bullhorn"></span> Menu Builder</a></li>
                        <li class="dropdown{{ (Request::is('admin/users*|admin/roles*') ? ' active' : '') }}">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="{{{ URL::to('admin/users') }}}">
                                <span class="glyphicon glyphicon-user"></span> Users <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li{{ (Request::is('admin/users*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-user"></span> Users</a></li>
                                <li{{ (Request::is('admin/roles*') ? ' class="active"' : '') }}><a href="#"><span class="glyphicon glyphicon-user"></span> Roles</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="{{{ URL::to('/') }}}">View Homepage</a></li>
                        <li class="divider-vertical"></li>
                        <li class="dropdown">
                                <a  class="dropdown-toggle"  data-toggle="dropdown" href="#">
                                    <span class="glyphicon glyphicon-user"></span> {{{ Auth::user()->username }}}   <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu " style="overflow:scroll"; >
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> A</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> B</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> C</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> d</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> e</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> f</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> g</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> h</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> i</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> j</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> k</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> l</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> m</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> n</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> o</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> p</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> q</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> r</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> s</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> t</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> u</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> v</a></li>
                                        <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> w</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> x</a></li>
                                    <li><a href="{{{ URL::to('user/settings') }}}"><span class="glyphicon glyphicon-wrench"></span> y</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{{{ URL::to('user/logout') }}}"><span class="glyphicon glyphicon-share"></span> z</a></li>
                                    <li class="divider"></li>

                                </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

采用多种方法:

1) 设置溢出:滚动到下拉类:

结果:它有效但一点也不理想。

2) 设置溢出:滚动到下拉菜单类:

结果:出现了一个滚动条，但没有做任何事情(也就是滚动不起作用)

3) 试图在这里做解决方案。如果我更改 html 或 css 以使其兼容，它会破坏其他已经制作的东西并且看起来很糟糕。如果有人可以帮助我，我将不胜感激。

更多帮助信息: 我的代码基于 laravel 初学者工具包:https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site

我已经为此研究了几个小时，但似乎没有什么是简单的解决方案，主要是因为我的菜单栏的结构方式。任何愿意提供帮助、css、javascript 或任何其他可以帮助我的人都将不胜感激。

Answer 1

也许你应该将高度设置为 dropdown-menu class ，否则 'overflow:auto' 将不起作用