固定位置和 overflow-y: 滚动问题

Question

我已经阅读了这个问题和答案：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue 以及其他一些相互冲突的用例。我也尝试过将不同的溢出类型应用于不同的 parents。似乎没有什么能让我的用例正常工作。

我的案例

我有一个全高固定菜单，其中将包含很多 link，所以如果浏览器不够高，无法显示所有菜单，我希望允许用户在固定 div。 不是一个大胆的要求。

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

更新

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

预期输出

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

我的结构是：

<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

尝试将 overflow-x , overflow-y 设置为隐藏

这应该行得通

Answer 2

您应该在 .menu li a 中使用 box-sizing:border-box 并在 .menu .drop 中使用 width: 70%;。

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

UPDATE Fiddle

Answer 3

如果理解有误请指正

尝试添加关注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;

}

您还需要删除 height:100% 的 .menu .drop class 以显示蓝色背景。

可能会有帮助

Answer 4

希望这就是您要找的:)

<a style="float:right" href="http://www.asmhijas.com/">Visit me</a>


<div id="container1">
    <div id="container2">          
        <ul class="menu">
    <div class="drop">
        <li ><a href="#">Home</a></li>
        <li class="menu-item-has-children highlight"><a href="#" class="">HOVER ME!!</a>    
            <div class="drop">
                <ul class="sub-menu">
                    <li class="menu-item-has-children highlight"><a href="#" class="">2nd Level Page</a>
                        <div class="drop">
                            <ul class="sub-menu">       
                                <li class="highlight"><a href="#">3rd Level Page</a></li>
                                <li class="highlight"><a href="#">Another 3rd Level Page</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="highlight"><a href="http://www.asmhijas.com/">Visit me</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
    </div>
</ul>


    </div>
</div>

风格在这里

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

Fiddle here

http://www.asmhijas.com/

Answer 5

Position:fixed 无法滚动。当您使用 top:0 设置它时，您将元素定位为始终位于 window 的顶部（而不是容器），恐怕这正是您将看到的，您的 ul 始终位于window 的顶部。

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

因此，作为起点，您只需要将 fixed 更改为 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;                
    }

在这个FIDDLE

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

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

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

JSFIDDLE2

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

固定位置和 overflow-y: 滚动问题

Position fixed and overflow-y:scroll issue

html

css

height

overflow