Невозможно прокрутить div в пределах фиксированного div

Question

У меня возникают проблемы с меню, содержащим родительский контейнер, который распространяется по всему сайту и div с фактическим содержимым. Все в порядке, пока экран устройства достаточно большой. Но особенно с мобильными устройствами невозможно показать весь контент.

Я создал jsfiddle в http://jsfiddle.net/89xyzsfz/, чтобы показать проблему с рабочим образцом и необходимыми js и css. На мобильных устройствах видны только некоторые части, но невозможно пролистывать контент.

сам Соответствующий код пояснил:

  <div class="hiddenMenu jsMenu"> 
       <div class="menuContainer jsMenuContainer"> 
        <h3>Menu content</h3> 

        <ul> 
         <li><a href="#item1">Item1</a></li> 
         <li><a href="#item2">Item2</a></li> 
         <li><a href="#item3">Item3</a></li> 
         <li><a href="#item4">Item4</a></li> 
         <li><a href="#item5">Item5</a></li> 
         <li><a href="#item6">Item6</a></li> 
         <li><a href="#item7">Item7</a></li> 
         <li><a href="#item8">Item8</a></li> 
         <li><a href="#item9">Item9</a></li> 
        </ul> 
       </div> 

       <div class="menuBackground jsMenuBackground"></div> 
      </div> 

• hiddenMenu держит все меню. При загрузке все меню скрыто и включено, нажав на элемент с классом css jsMenuButton назначен.
• menuContainer - это контейнер с содержимым, которое необходимо прокручивать, если его части не видны на устройстве.
• menuBackground используется для проектирования фона при показе содержимого без какой-либо конкретной функции, кроме этого.

Answer 1

Изменение CSS для .hiddenMenu .menuContainer к следующему:

.hiddenMenu .menuContainer { 
    position: relative; 
    margin: 0 auto; 
    text-align: center; 
    z-index: 12; 
    height: 100%; 
    overflow: auto; 
} 

The .menuContainer потребности для прокрутки пунктов меню и, следовательно, требует overflow:auto;, height:100% и должен быть позиционирован относительно вместо абсолютного.

http://jsfiddle.net/89xyzsfz/5/

Надежда, что помогает!

Answer 2

Просто измените свой код на этот CSS. Переполнение обрезается, а свитка-бар добавляется, чтобы увидеть остальную часть содержания

.hiddenMenu { 
    display: none; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top : 0; 
    width: 100%; 
    z-index: 10; 
    overflow:scroll; 
} 

Переполнение Значения

видно: содержание не обрезается, когда он переходит за пределы своей коробки. Это значение по умолчанию для свойства

скрыто: переполнение содержимого будет скрыто.

пролистайте: похоже на скрытый за исключением пользователей будет иметь возможность прокручивать скрытое содержание

авто: если доходы контент вне его поле, то, что контент будет скрыт в то время как полоса прокрутки должна быть чтобы пользователи могли прочитать остальную часть содержимого.

начальная: использует значение по умолчанию, который виден

унаследуют: устанавливает переполнение значения его родительского элемента.