固定的DIV应该滚动

Question

我的代码中有以下结构：

<div id="layerContentLayer">
    <div id="layerContentLayerHead">
        <img class="imageLogo" src="/img/logo.png">
    </div>
    <div id="layerContentLayerBody">
        <div class="areaContentLayerText">
            <div class="contentItem" id="contentItem-99">
                <div class="contentItem-inner">
                    <div class="head"></div>
                </div>
            </div>
           <div class="areaContentForm"></div>
       </div>
   </div>
</div>

我的CSS看起来像这样：

#containerContentLayer {
    opacity: 1;
    background: #FFF;
    background-image: none;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
    background-image: url('/img/Background_Contact.jpg');
    background-repeat: no-repeat
}
#layerContentLayer {
    width: 1000px;
    background-color: #f5f5f5;
    margin: 50px auto 0 auto;
}

这是一个通过单击链接来打开的图层。在此中，有一个带有输入和标签的触点表格，还有一个在显示上设置的背景图像：移动视图中没有一个（小于800px）。

如果我使用此结构打开网站，则该图层将打开，但我无法滚动或滑动（我在手机或浏览器上查看网站都没关系）。

我尝试了很多尝试，例如设置另一个属性溢出y：滚动，但没有成功。

我必须更改滚动/滑动正在工作的代码？

Answer 1

我希望我正确理解您的请求。首先，您需要将#layerContentLayer设置为特定的高度，以便浏览器知道要滚动的尺寸（可以是PX，％或其他）。第二，您需要将其设置为overflow-y: scroll;（或自动...）。

这是一个小提琴示例：https://jsfiddle.net/64z8ef30/