Question

简单来说，我正在为较小的屏幕创建垂直导航，导航容器是固定放置的。导航中当然有项.menu，并且当单击菜单时会显示一个子菜单，因此导航会扩展。

html是这样的：

.main-nav ===> div  // the container
.nav-items ====> ul // child of .main-nav and the 
                       container of all .menu items

.menu ====> li // children of .nav-items, they are the navigation items 
                  that whenever clicked  sub menus extends
                  from max-height: 0 
                  to max-height: 300px

.sub-menu ===> ul // the sub menus that are shown 
                  whenever corresponding menus clicked

我通过给.main-nav（容器）overflow:hidden和.nav-items overflow: auto克服了滚动问题，容器的宽度和高度为100％。并且.nav-items的宽度为106％，因此隐藏了滚动条

问题是我给容器设置了边框，并且因为我给容器设置了100％的高度，所以即使在导航扩展到占据所有这些高度之前，我也始终显示100％的高度边框。

这是代码：

//The container
.main-nav {
    position: fixed;
    right: 50px;
    top: 50px;
    overflow: hidden;
    width: 250px;
    border: 1px solid #eee;
    border-top: 4px solid #000;
    overflow: hidden;
    height: 100%;
}

// the container of all .menu elements
.nav-items {
    overflow: auto;
    max-height: 100%;
    width: 106%;
}

.menu  {
    position: relative;
    padding: 1em;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    width: 100%;    
}


.sub-menu {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
}

input[type="radio"]:checked + .sub-menu {
  max-height: 300px;
  transition: max-height 0.4s ease-in-out;
}

我尝试使用max-height: 100%而不是.main-nav的高度，但是我意识到我不需要高度而不是max-height，滚动才能在我的情况下正常工作。

对不起，如果我的问题很难解释，但是我尽力解释了，我希望它已经足够清楚了！

问题是：

当导航溢出视口高度时，如何使导航正确流畅而又不影响滚动能力？

固定位置的垂直导航的高度问题？

0 个答案: