Html 位置固定且溢出-y：滚动问题

我已经阅读了这个问答：以及其他一些相互冲突的用例。我也尝试过将不同的溢出类型应用于不同的父级。我的用例似乎无法正常工作

我的案例

我有一个全高的固定菜单，将包含大量链接，因此如果浏览器不够高，无法显示所有链接，我希望允许用户在固定分区内滚动，而不是粗体请求

如何解决此问题，以下是我使用的设置示例：

更新

这是我的上下文完整代码的更新版本，这正是我想要的菜单外观，但我只想在屏幕高度小于菜单长度时允许垂直滚动

预期产出

每个链接之间的行应该溢出到蓝色菜单的右侧（如下图）并且允许用户在蓝色菜单内滚动。目前我只能做其中一个

我的结构是：

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

---

尝试将

overflow-x

，

overflow-y

设置为隐藏

---

这应该是可行的

您应该在

中使用
框大小：边框框
。菜单li a

并使

宽度：70%菜单中选择code>。拖放

.menu li a {
    color: #aaa;
    text-transform: uppercase;
    font-size:12px;
    padding: 8px 35px;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-sizing:border-box;
}

如果我误解了，请纠正我

尝试添加以下css

.menu li a {
color: #aaa;
text-transform: uppercase;
font-size: 12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

此外，您还需要删除高度：100%的.menu.drop类以显示蓝色背景

可能会有帮助
希望这就是你想要的：）


位置：无法滚动固定。当您将其设置为top:0时，您将元素定位为始终位于窗口顶部（而不是容器），恐怕这正是您将看到的，您的ul始终位于窗口顶部

如果你的男人可能有很多元素，那么最好使用绝对定位，这样你的身体上就会有滚动条

因此，作为一个起点，您只需要更改fixed for absolute并删除
bottom:0
属性：

.menu   {
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    }

如本

你现在只需要确保这个菜单的高度和你的内容一样高，这样它就会填满你所有的窗口高度。您可以使用基本jquery：

var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
    'height': menuHeight + 'px'
});

计算“内容”容器的高度并将其作为css属性添加到菜单中：


注：我是根据我对这个问题的评论做出这个回答的。如果您发现任何其他问题，请随时在此处发表意见，我会尽力提供帮助（如果我知道如何）。
预期输出是什么？@G.L.p每个链接之间的行应溢出到蓝色菜单的右侧，同时允许用户滚动蓝色菜单。目前我只能做其中一个。请参阅更新的问题。您可能不知道，但在Safari 9（os x上的最新版本）中，当您在JSFIDLE中滚动时，所有内容都会黑白闪烁！你可能也想看看。如果我们改变你的HTML的结构可以吗？@www139是一个WP生成的UL列表&我只能控制子菜单UL（.drop divs）周围的内容。如果你能坚持这一点，那么就要想尽一切办法改变你需要做的事情，以便让它发挥作用。滚动条上的闪烁，我只需要将BG白色应用于.li的菜单&这将修复它。如果我误解了这一点，请原谅，但这并没有达到我问题中所示的预期输出？哦，不，我很抱歉@egr103实际上我没有得到正确的结果，请检查更新小提琴，我希望它能对您有所帮助。那么为了让JSFIDLE正常工作，您对代码做了哪些更改？你能更新一下答案吗？恐怕这没用。我不太明白70%的宽度是如何将菜单显示在右边的？请详细说明为什么这样可以解决这个问题，以便对未来的读者有用。谢谢不幸的是，这没有起作用，请参阅我问题中标题为“预期输出”的部分。不幸的是，就像@Maddy的另一个答案一样，这切断了向右的箭头。请参阅更新的问题与CSS最小高度媒体查询相结合，我设法实现了我的目标。因此，我将绝对位置应用于。对于屏幕高度小于800px的屏幕和大于此值的屏幕，我将绝对位置应用于菜单：固定。
.menu   {
        padding: 0;
        margin: 0;    
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;

            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;

    }

    .menu li.highlight {
        -webkit-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -moz-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -ms-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    }

    .menu li.highlight:hover {
        -webkit-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -moz-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -ms-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        background: pink;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    }

    .menu li > .drop li > .drop li.current-menu-item a,
    .menu li > .drop li.current-menu-item a,
    .contact.open a { color: #fff ; }

    .menu li {
        height: auto;
        width: 100%;
        list-style: none;
         border-bottom: 2px solid #f0f0f0;
         -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
        background: #fff;
        -webkit-user-select: none;
-webkit-touch-callout: none;
    }

    .menu li a {
        color: #aaa;
        text-transform: uppercase;
        font-size:12px;
        padding: 0 35px;
        display: inline-block;
        width: 100%;
         line-height: 1.4em;
         height:58px;
         -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
    }

        /* Sweep To Right */
        .menu li a {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          position: relative;
          -webkit-transition-property: color;
          transition-property: color;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
        }

        .menu li a:before,
        .menu li.current-menu-item > .drop a:before,
        .menu li.current-menu-item.out a:before {
          content: "";
          position: absolute;
          z-index: -1;
          top: -2px;
          left: 0;
          right: 0;
          bottom: -2px;
          height: auto;
            background:pink;
          -webkit-transform: scaleX(.01);
          transform: scaleX(.01);
          -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;

            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li a:hover,
        .menu li a:focus,
        .menu li a:active,
        .menu li.current-menu-item a,
        .menu li.current-menu-item.out a:hover {  color: white; }

        .menu li.current-menu-item.out a { color: #aaa;}

        .menu li a:hover:before,
        .menu li a:focus:before,
        .menu li a:active:before,
        .highlight:hover > a:before,
        .menu li .drop li.highlight:hover > a:before,
        .menu li.current-menu-item a:before,
        .menu li.current-menu-item > .drop a:hover:before,
        .menu li.contact.open a:before,
        .menu li.current-menu-item.out a:hover:before {
          -webkit-transform: scaleX(1);
          transform: scaleX(1);
        }
        /* end sweep-to-right transitions */

        .menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
            -webkit-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
        }
        .menu .drop li > .drop {    z-index: -1;    }

        .menu li > .drop {
            width:280px;
            margin: 0;
            padding: 0;
            position:fixed;
            left:-280px;
            top:0;
            bottom:0;
            height: 100%;
            display: block;

                -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
            transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li:hover > .drop,
        .menu li.hover_effect > .drop { left:280px; }
        .menu li ul li:hover > .drop,
        .menu li ul li.hover_effect > .drop { left:560px; }

        .menu .drop li .drop > ul {height: 100%; background-color: #fff;        }

        .menu .drop li ul li > .drop ul {
            -webkit-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15); }

            .menu .drop.boom {
                left: -280px !important;
                -webkit-transition-duration: .5s;
                transition-duration: .5s;
            }

            .menu li ul li > .drop.boom {
                -webkit-transition-delay: 0s;
            transition-delay: 0s;
            -webkit-transition-duration: .25s;
            transition-duration: .25s; }

        .menu li a.logo,
        .mobile-menu a.logo {
            text-align: center;
            font-family: 'Varela Round', Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-size: 20px;
            height: auto;
            padding: 40px 0;
            text-transform: none;
            display: block;
            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
             transition: all .45s cubic-bezier(.77,0,.175,1);
        }

        .menu li a.logo > *,
        .mobile-menu a.logo > * { display: block; }
        .menu li a.logo span.monmouthshire,
        .mobile-menu a.logo span.monmouthshire { color: #222; }

        .menu li a.logo i,
        .mobile-menu a.logo i {
            -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                      transition: all 0.3s ease;
             font-size: 120px; line-height: .55em; position: relative; top:0; }

        .menu li a.logo:hover i,
        .mobile-menu a.logo:hover i { top: -5px; color: #38bf38}
        .menu li a.logo:hover,
        .mobile-menu a.logo:hover { color: #38bf38}

        .mobile-menu a.logo { font-size: 80% }
        .mobile-menu a.logo i { font-size: 40px }

        /* Arrow Right */
        .menu li a {    position: relative; }

        .menu li a:after,
        .menu li > .drop li a:after,
        .menu li > .drop li > .drop li a:after,
        .menu li.current-menu-item.out a:after {
            content: '';
        position: absolute;
        border-style: solid;
        border-width: 32px 0 32px 20px;
        border-color: transparent pink;
        display: block;
        width: 0;
        z-index: -1;
        margin-top: -32px;
        margin-right:1px;
        right: 280px;
        top: 50%;
        -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        }

.menu li:hover a:after,
        .menu li > .drop li:hover a:after,
        .menu li > .drop li > .drop li:hover a:after,
        .menu li.current-menu-item a:after,
        .menu li > .drop li > .drop li.current-menu-item a:after,
        .menu li > .drop li.current-menu-item a:after,
        .menu li.contact.open a:after,
        .menu li.current-menu-item.out:hover a:after {
            right:-20px;
        }

        .highlight:hover a {color: #fff;}
        .highlight:hover > .drop a {color: #aaa;}
        .highlight > .drop li:hover a {color: #fff;}
        .highlight > .drop li > .drop   li a {color: #aaa;}
        .highlight > .drop li > .drop   li:hover a,
        .menu li > .drop li > .drop li.current-menu-item {color:#fff;}

#container1{
    height: 100vh;
    width: 280px;
    overflow: hidden;

}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 23px;


}
body{overflow:hidden}

.menu   {
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    }

var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
    'height': menuHeight + 'px'
});