无法设置溢出：隐藏； 在div上

Question

我无法设置溢出：隐藏； 在div包装器上为此脚本。

请看这个js小提琴。 http://jsfiddle.net/CwzAD/1/

我的目标是在页面上显示10个单元格（高度为200 px），并仅显示此限制内的动画，以便充当遮罩。

知道我在做什么错吗？ 如果仅使用CSS，即使使用JavaScript也无法采取其他替代方法吗？

    *{
        margin: 0;
        padding: 0;
    }
    #pageset {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 500px;
        height: 200px;
        border: 1px solid rgba(0,255,255,1);
        -webkit-box-sizing:border-box;
    }
    #wrapper {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 500px;
        background-color: green;
        /*overflow: scroll;*/ /* PROBLEM HERE----------------*/
        /*height: 200px;*/ /* PROBLEM HERE----------------*/
    }
    #navigator {
        position: absolute;
        left: 600px;
    }
    ul {
        list-style: none;
        /* margin:0px;
        padding:0px;*/
    }
    li:nth-child(even) {
        background: #d80000;
    }
    li {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin: 0px;
    }
    .focus {
        background-color: yellow !important;
    }
    .btn {
        float: left;
        width: 50px;
        height: 50px;
        border: 2px gray solid;
        margin: 10px;
        background-color: #f0f0f0 ;
    }
    .icon {
        width: 60px;
        height: 60px;
        border: 2px gray solid;
        margin: 10px;
        background-color: #99ff66;        
    }

解决方案在这里http://jsfiddle.net/Uz5a9/

Answer 1

基本上，您需要做的是将#wrapper div用作容器，高度仅为200px。 您生成的.content div然后应在该包装器内滚动。

为此，您需要相对定位包装器，然后将内容div绝对定位在包装器内。 包装器永远都不能移动。

内容可以根据需要设置为高，包装器应始终保持200px高。

检查以下小提琴，该小提琴正好演示了这一点： http : //jsfiddle.net/Uz5a9/

Answer 2

试试这个CSS它将在这里正常工作

.content {
    height:200px;
    overflow:hidden
}

Answer 3

只需将这些附加规则应用于#wrapper ：

#wrapper { max-height: 200px; overflow: hidden; }

它似乎按照描述的那样工作。