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 class 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。剪辑溢出，但添加了滚动条以查看其余内容

SELECT schema_name FROM information_schema.schemata

溢出值

可见：内容在其框外进行时不会被剪裁。这是属性的默认值

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

滚动：类似于隐藏，但用户将能够滚动浏览隐藏的内容

自动：如果内容在其框外进行，则该内容将被隐藏，同时应该可以看到滚动条以供用户阅读其余内容。

initial：使用可见的默认值

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

无法在固定div中滚动div

2 个答案: