Невозможно установить переполнение: скрыто; на div

Question

Я не могу установить переполнение: скрыто; на обертке div для этого скрипта.

Пожалуйста, посмотрите на эту скрипку js. http://jsfiddle.net/CwzAD/1/

Моя цель состоит в том, чтобы отображать на этой странице 10 ячеек (200 пикселей по высоте) и показывать только анимацию в пределах этого предела, поэтому действовать как маску.

Любая идея, что я делаю неправильно? Любой альтернативный подход даже с использованием JavaScript, если с помощью CSS не возможен?

*{ 
     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 абсолютно внутри обертки. Обертка никогда не должна перемещаться.

Содержимое может быть как можно выше, обертка должна всегда оставаться на 200 пикселей высотой.

Проверьте следующее скрипку, который демонстрирует именно это: http://jsfiddle.net/Uz5a9/

Answer 2

Просто применять эти дополнительные правила #wrapper:

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

и, кажется, работает так же, как описано.

Answer 3

Попробуйте CSS он будет работать нормально DEMO HERE

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