javascript - 带有许多元素的 Bootstrap 3 侧边导航不会在整页 View 中滚动

Question

我正在使用 Bootstrap sb-admin v2 模板。我正在使用侧边导航栏。我似乎遇到了与其他人相反的问题......在桌面显示器上查看页面时，如果我展开

元素的下拉列表或添加足够的顶层

< li> 内容超出视口(viewport)高度的元素，它们将被 chop 并且不会滚动。当我调整窗口大小时或在任何移动设备上查看页面时，菜单会按预期折叠，我可以滚动导航

元素。我在所有相关的 css 类上使用 overflow-y: auto、scroll 等尝试了很多事情，但似乎没有任何效果。我已经尝试过 javascript 修复，但这破坏了移动功能。这一切都直接来自版本 3.3 的 bootstrap.min.css 文件我不知道如何解决这个问题。有什么建议吗？

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="sideMenu" class="nav navbar-nav side-nav">
    <li><a id="menuItem" href="javascript:;" data-toggle="collapse" data-target="#NewsItems"><i class="fa fa-fw fa-newspaper-o"></i> News Items <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="NewsItems" class="collapse">
        <li><a runat="server" href="/admin/modules/news-items/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/news-items/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=NewsItem">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=NewsItem">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Photos"><i class="fa fa-fw fa-camera"></i> Photos <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Photos" class="collapse">
        <li><a runat="server" href="/admin/modules/photos/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/photos/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Photo">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Photo">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Blogs"><i class="fa fa-fw fa-rss"></i> Blogs <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Blogs" class="collapse">
        <li><a runat="server" href="/admin/modules/blogs/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/blogs/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Blog">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Blog">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Albums"><i class="fa fa-fw fa-photo"></i> Albums <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Albums" class="collapse">
        <li><a runat="server" href="/admin/modules/albums/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/albums/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Audio"><i class="fa fa-fw fa-music"></i> Audio <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Audio" class="collapse">
        <li><a runat="server" href="/admin/modules/audio/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/audio/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Events"><i class="fa fa-fw fa-calendar-o"></i> Events <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Events" class="collapse">
        <li><a runat="server" href="/admin/modules/events/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/events/add.aspx">Add</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/view.aspx?CategoryType=Event">Manage Categories</a>
        </li>
        <li><a runat="server" href="/admin/modules/categories/add.aspx?CategoryType=Event">Add Category</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#MenuItems"><i class="fa fa-fw fa-navicon"></i> Menu Items <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="MenuItems" class="collapse">
        <li><a runat="server" href="/admin/modules/menu-items/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/menu-items/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Pages"><i class="fa fa-fw fa-file-o"></i> Pages <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Pages" class="collapse">
        <li><a runat="server" href="/admin/modules/pages/view.aspx">Manage</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Roles"><i class="fa fa-fw fa-users"></i> Roles <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Roles" class="collapse">
        <li><a runat="server" href="/admin/modules/roles/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/roles/add.aspx">Add</a>
        </li>
      </ul>
    </li>
    <li><a href="javascript:;" data-toggle="collapse" data-target="#Users"><i class="fa fa-fw fa-user"></i> Users <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="Users" class="collapse">
        <li><a runat="server" href="/admin/modules/users/view.aspx">Manage</a>
        </li>
        <li><a runat="server" href="/admin/modules/users/add.aspx">Add</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

几天来我一直在努力解决这个问题......发布这个问题几分钟后我找到了答案......

我需要做的就是添加 height: 100%;到 sb-admin.css 文件中的侧边导航 div，如下所示:

@media(min-width:768px) {
  .side-nav {
    position: fixed;
    top: 51px;
    left: 225px;
    width: 225px;
    margin-left: -225px;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    background-color: #222;
    height: 100%;
  }