無法在固定div中滾動div

Question

我遇到一個菜單問題，該菜單包含一個分布在整個網站上的父容器和一個包含實際內容的div。 只要設備屏幕足夠大，一切都可以。 但是特別是對於移動設備，不可能顯示全部內容。

我在http://jsfiddle.net/89xyzsfz/創建了一個jsfiddle，以使用工作示例以及所需的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

將.hiddenMenu .menuContainer的css更改為以下內容：

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

.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;
}

溢出值

可見：內容超出其框的范圍時不會被剪切。 這是屬性的默認值

隱藏：溢出的內容將被隱藏。

滾動：類似於隱藏內容，但用戶可以滾動瀏覽隱藏內容

自動：如果內容超出其框的范圍，則該內容將被隱藏，而滾動條應可見，以便用戶閱讀其余內容。

初始值：使用可見的默認值

繼承：將溢出設置為其父元素的值。