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

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

JSFiddle

Answer 2

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

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

2 个答案: