html - 如何申请溢出:hidden;?

Question

超出#page 的限制时，我需要隐藏.content-section。

我需要使用溢出:隐藏；但我无法在#page 上应用获得所需的结果。

知道如何解决吗？

http://jsfiddle.net/Pet8X/1/

   <div id="btn-up" onclick="moveUp();">UP</div>
    <div id="btn-down" onclick="moveDown();">DOWN</div>
    <div id="page">
        <div id="bar-header">Header</div>
        <div id="content">
            <div class="content-section item1 ">
                <a name="anchor-1"></a>
                <h2>Content 1</h2>
            </div>
            <div class="content-section item2">
                <a name="anchor-2"></a>
                <h2>Content 2</h2>
            </div>
            <div class="content-section item3">
                <a name="anchor-3"></a>
                <h2>Content 3</h2>
            </div>
            <div class="content-section item4">
                <a name="anchor-4"></a>
                <h2>Content 4</h2>
            </div>
        </div>
        <div id="bar-footer">Footer</div>
    </div>


/*resetter */
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
        background: transparent;
        width: 500px;
        height: 200px;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    #bar-header, #bar-footer {
        position: fixed;
        left: 0px;
        width: 500px;
        height: 30px;
        z-index: 100;
        background-color: rgba(50,50,50,0.5);
        text-align: center;
    }

    #bar-header {
        top: 0px;
    }

    #bar-footer {
        top: 690px;
    }

    #btn-up, #btn-down {
        position: fixed;
        left: 1230px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        outline: 1px solid black;
        z-index: 200;
    }

    #btn-up {
        top: 0px;
    }

    #btn-down {
        top: 50px;
    }

    #content {
        position: fixed;
    }

    #content-inner {
        overflow: hidden;
    }

    .content-section {
        background-color: lightgray;
        outline: 1px solid black;
        width: 50px;
    }
    /* content sizes */
    .item1 { /* top is 0 */
        height: 200px;
    }

    .item2 { /* top is 200 */
        height: 400px;
    }

    .item3 { /* top is 600 */
        height: 600px;
    }

    .item4 {
        height: 800px;
    }

    .content-section h2 {
        position: relative;
        top: 30px; /**avoid to go under the header bar*/
    }

    .active {
        background-color: violet !important;
    }

Answer 1

您引用的边栏容器 ID 不正确。

您的规则规定

#content {
    position: fixed;
}

#content-inner {
    overflow: hidden;
}

但是没有元素#content-inner。

改用这个:

#content{
    position: fixed;
    overflow: hidden;
}

这导致:

Fiddle