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

我有一个相当长的nav（

.nav main

），作为固定标题（

标题

）中的子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-->

我的

.toggle（）

JS：

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

这是一把小提琴。请将窗口缩小到足够小，以便当通过单击

按钮显示导航时，内容被切断，需要一个滚动条：

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

在div和overflow上设置一个高度：滚动。
您没有子div，请在每个样式声明（对象、id、类）后关闭括号
！所有的括号都乱七八糟，这不是你瞄准孩子或后代的方式…@PitaJ
nav
是
header
Aah的子div，好吧，很抱歉；）我见过较少的语法，但还没有一个+1.向我展示：））考虑到方向的变化，比如在手机上等，我如何根据窗口设置高度？在你问同样的问题之后，还有另一个问题。这是一个不同于你所问的问题，所以我没有包括在内，但根据你想做的，有很多方法可以实现。
$(".nav-main button").click(function(event){
        $(".nav-main ul").toggle();
        event.preventDefault();
});