0

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

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

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

知道我做错了什么吗？如果仅使用 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/

4

3 回答 3

3

基本上，您需要做的就是将#wrapperdiv 用作容器，它只有 200px 高。然后，您生成的.contentdiv 应该在该包装器内滚动。

为此，您需要相对定位包装器，然后将内容 div 绝对定位在包装器内。包装器不应该四处移动。

内容可以任意高，包装器应始终保持 200px 高。

检查以下小提琴，这正是证明了这一点：http: //jsfiddle.net/Uz5a9/

于 2013-09-11T09:19:16.880 回答
1

试试这个 css，它会很好用DEMO HERE

.content {
    height:200px;
    overflow:hidden
}
于 2013-09-11T09:27:15.493 回答
0

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

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

它似乎像描述的那样工作。

于 2013-09-11T09:23:20.677 回答