在垂直导航栏中滚动

麻坡

我有一个示例(JSFiddle Example),如果导航栏的内容被浏览器的屏幕大小所截断,则我希望其中的内容是可滚动的。有关当前问题,请参见“正常尺寸”和“小尺寸”。

要求是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;
   }
}
麻坡

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在导航栏中垂直居中放置文本?

来自分类Dev

Zurb Foundation垂直导航栏?

来自分类Dev

垂直导航栏中的引导文本

来自分类Dev

垂直导航栏左侧的空白

来自分类Dev

如何设计用于垂直滚动的冻结的左侧导航栏?

来自分类Dev

如何使导航栏垂直居中

来自分类Dev

容器或导航栏的垂直空间

来自分类Dev

Bootstrap固定顶部导航栏与垂直滚动条重叠

来自分类Dev

流体导航栏中图像的垂直居中

来自分类Dev

在包含徽标的导航栏中垂直对齐文本

来自分类Dev

Bootstrap Sticky导航栏在折叠模式下导致垂直滚动

来自分类Dev

导航栏中的垂直居中文本

来自分类Dev

基于内容的可滚动垂直导航栏

来自分类Dev

Flutter中的可滚动导航栏

来自分类Dev

导航栏中的Flexbox:无法垂直对齐项目

来自分类Dev

向下滚动时如何垂直缩小导航栏?

来自分类Dev

滚动顶部导航栏

来自分类Dev

垂直导航栏左侧的空白

来自分类Dev

Bootstrap固定顶部导航栏与垂直滚动条重叠

来自分类Dev

使用UiBinder在Bootstrap 3中的垂直导航栏

来自分类Dev

流体导航栏中图像的垂直居中

来自分类Dev

HAML中Foundation垂直导航栏中的link_to

来自分类Dev

创建滚动导航栏

来自分类Dev

在Bootstrap 4中更正导航栏链接的垂直对齐

来自分类Dev

导航栏中的垂直居中字体真棒图标

来自分类Dev

导航中的垂直对齐搜索栏

来自分类Dev

导航栏是垂直的而不是水平的

来自分类Dev

垂直导航栏移动到网站的其他部分/删除滚动条

来自分类Dev

如何在垂直导航栏中创建下拉列表

Related 相关文章

热门标签

归档