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

这是将要通过单击 link 打开的图层。这里有一个带有输入和标签的联系表单，还有一个显示设置的背景图像：none 在移动视图中（小于 800 像素）。

如果我打开具有这种结构的网站，图层会打开但我无法滚动或滑动（无论我是在手机 phone 还是浏览器上查看该网站都没有关系）。

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

为了让 scrolling/swiping 正常工作，我需要更改哪些代码？

Answer 1

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

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

固定 div 应该是可滚动的

Fixed div should be scrollable

html

css

scroll

fixed