html - 位置固定和溢出-y :scroll issue

Question

我已阅读此问答:CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue以及一堆其他相互冲突的用例。我也尝试过对不同的 parent 应用不同的溢出类型。似乎没有什么能让我的用例正常工作。

我的案例

我有一个包含很多链接的全高固定菜单，所以如果浏览器的高度不足以显示所有链接，我希望允许用户在固定的 div 内滚动。 这不是一个大胆的要求。

我该如何解决这个问题，这是我正在使用的设置示例:http://jsfiddle.net/mz9abf43/9/

更新

这是更新后的 fiddle ，包含我的完整上下文代码，这正是我希望菜单的外观，但我只想在屏幕高度小于菜单长度时允许垂直滚动。 http://jsfiddle.net/mz9abf43/24/

预期输出

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

我的结构是:

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

我的 CSS 是

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;

}

.menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
}

Answer 1

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

如果您的菜单可能包含许多元素，那么使用绝对定位可能更好，这样您就会在主体上看到滚动条。

因此，作为起点，您只需要将 fixed 更改为 absolute 并删除 bottom:0property:

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

如本 FIDDLE

您现在只需确保此菜单的高度与您的内容一样“高”，这样它就会填满您的所有窗口高度。您可以使用基本的 jquery:

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

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

JSFIDDLE2

注意:我根据对问题的评论做出了这个回答。如果您发现任何其他问题，请随时在这里发表评论，我会尽力提供帮助(如果我知道如何提供帮助)。