html - 固定的 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;
}

这是一个将通过单击链接打开的图层。其中有一个带有输入和标签的联系表单，还有一个显示设置的背景图像:移动 View 中没有(小于 800 像素)。

如果我打开具有这种结构的网站，图层打开但我无法滚动或滑动(无论我是在手机上还是在浏览器上查看该网站都无所谓)。

我尝试了很多，比如设置另一个属性 overflow-y: scroll 但它并没有成功。

要使滚动/滑动正常工作，我需要更改哪些代码？

Answer 1

希望我正确理解了您的要求。首先，您需要将 #layerContentLayer 设置为特定高度，以便浏览器知道要滚动的尺寸(可以是 px、% 或其他)。其次，您需要将其设置为 overflow-y: scroll;(或 auto...)。

这是一个 fiddle 示例: https://jsfiddle.net/64z8ef30/