Question

我有一个例子（JSFiddle Example），我希望导航栏的内容可滚动，如果它被浏览器的屏幕大小切断。有关当前问题，请参阅Normal Size和Small Size。

如果屏幕尺寸为250px，则要求屏幕的左侧部分（> 768px）被导航栏（或任何父级）覆盖。

到目前为止，我没有取得任何令人满意的结果，因此我正在寻求帮助！

提前致谢！

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

Answer 1

通过在Javascript中手动将高度设置为某个PX值来解决此问题，虽然我想避免这种情况，但在我看来这是唯一的解决方案。

滚动垂直导航栏

1 个答案: