Question

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

我的目标是在页面上显示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/

Answer 1

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

要完成此操作，您需要相对定位包装器，然后将内容div绝对放置在包装器内。包装器永远不会移动。

内容可以尽可能高，包装应始终保持200px高。

检查以下小提琴，其中正好说明了这一点：http://jsfiddle.net/Uz5a9/

Answer 2

试试这个css它可以正常工作 DEMO HERE

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

Answer 3

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

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

它似乎与描述一样有效。

无法设置溢出：隐藏;在一个div

3 个答案: