无法在固定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;
}

溢出值

可见：内容超出其框的范围时不会被剪切。 这是属性的默认值

隐藏：溢出的内容将被隐藏。

滚动：类似于隐藏内容，但用户可以滚动浏览隐藏内容

自动：如果内容超出其框的范围，则该内容将被隐藏，而滚动条应可见，以便用户阅读其余内容。

初始值：使用可见的默认值

继承：将溢出设置为其父元素的值。