javascript - 固定容器内子 div 中的滚动条

Question

我有一个相当长的导航（.nav-main）作为固定标题（header）内的子 div。当通过 jQuery 显示导航时.toggle()，内容比窗口长，因此不会滚动。我试图弄清楚如何将滚动条（最好在 CSS 中）应用于固定导航中的子 div：

    <header class="clearfix">

                <nav class="nav-main">
                    <button>Open Topics</button>
                    <ul>
                        <li><a href="">Section 1</a></li>
                        <li><a href="">Section 2</a></li>
                        <li><a href="">Section 3</a></li>
                        <li><a href="">Section 4</a></li>
                        <li><a href="">Section 5</a></li>
                        <li><a href="">Section 6</a></li>
                        <li><a href="">Section 7</a></li>
                        <li><a href="">Section 8</a></li>
                        <li><a href="">Section 9</a></li>
                        <li><a href="">Section 10</a></li>
                        <li><a href="">Section 11</a></li>
                        <li><a href="">Section 12</a></li>
                        <li><a href="">Section 13</a></li>
                        <li><a href="">Section 14</a></li>
                        <li><a href="">Section 15</a></li>
                        <li><a href="">Section 16</a></li>
                        <li><a href="">Section 17</a></li>
                        <li><a href="">Section 18</a></li>
                        <li><a href="">Section 19</a></li>
                        <li><a href="">Section 20</a></li>
                    </ul>
                </nav><!--end nav-main-->
</header>

<div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--end main-->

SCSS/CSS：

header{

    background-color: #ccc;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;


    .head-wrap{
        position: relative;
        height: 50px;
    }

    .nav-main{

        position: relative;

        button{
            float: right;
            margin-top: 10px;
            margin-right: 70px;
            background-color: pink;
        }

        ul{
            display: none;
            background-color: #333;
            top: 50px;
            position: absolute;
            width: 100%;
            z-index: 2;
            overflow: auto;

            li{
                background-color: #333;

                a{
                    color: #fff;
                    text-decoration: none;
                    padding:10px 50px;
                    display: block;
                }
            }
        }
    }
}

#main{
    margin-top: 50px;

    p{
        margin-bottom: 20px;
    }
}

还有我的.toggle()JS：

$(".nav-main button").click(function(event){
        $(".nav-main ul").toggle();
        event.preventDefault();
});

这是一个小提琴。请将窗口缩小到足够小，以便通过单击 显示导航时button，内容被切断，需要滚动条：

http://jsfiddle.net/HAUcU/1/

Answer 1

您需要为height.nav-menu ul 元素设置一个属性。这可以静态设置或使用脚本根据窗口高度进行设置。

JSFiddle

Answer 2

在 div 上设置高度并溢出：滚动。