在垂直导航栏中滚动

Question

我有一个示例（JSFiddle Example），其中我希望导航栏的内容可以滚动，如果被浏览器屏幕大小截断。 请参见Normal Size和Small Size以了解当前问题。

要求是，如果屏幕大小> 768px，则屏幕左侧（250px）应由导航栏（或任何父级）覆盖。

到目前为止，我没有达到令人满意的结果，因此我请求帮助！

提前致谢！ CSS

@media (min-width: 768px) 
{
    .sidebar-main.expanded {
        width: 250px;
    }

    .sidebar-main {
        position: fixed;
        height: 100%;
    }

    .sidebar-main .navbar {
        height: 100%;
    }

    .sidebar-main .navbar .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    .sidebar-main .navbar-header {
        float: none !important;
    }

    .sidebar-main .navbar-collapse {
        padding: 0px;
        max-height: none;
    }

    .sidebar-main ul {
        float: none;
        &: not {
          display: block;
        }
    }

   .sidebar-main li {
        float: none;
        display: block;
   }
}

- Muarl

---

忘了提到导航栏标题不应该与内容一起滚动（位置应该是固定的）。 - Muarl

Answer 1

通过在Javascript中手动设置高度为特定的PX值来解决了这个问题，尽管我想避免这种情况，但似乎这是唯一的解决方案。

- Muarl