具有许多项目的Bootstrap 3侧面导航无法在全页视图中滚动

Question

I'm using the Bootstrap sb-admin v2 template. I am making use of the side-nav bar. I seem to be having the opposite problem of everyone else out there... When viewing the page on a desktop monitor, if I expand the dropdowns for the

items or add enough top level

items such that the contents extend beyond the viewport's height, they are cut off and will not scroll. When I resize the window or look at the page on any mobile device, the menu collapses as expected, and I can scroll through the nav

items. I have tried many things using overflow-y: auto, scroll, etc... on all related css classes and nothing seems to work. I have tried javascript fixes, but that breaks the mobile functionality. It's all straight out of the bootstrap.min.css file for version 3.3 I'm at a loss as to how to fix this. Any suggestions?

 <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

I've been trying to fix this for days.... Minutes after posting this question I found the answer...

All I needed to do was add height: 100%; to the side-nav div in the sb-admin.css file as follows:

 @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%; }