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）。

如果我打开具有此结构的网站，图层会打开，但我无法滚动或滑动（如果我在手机或浏览器上查看该网站，则无关紧要。）

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

我需要更改滚动/滑动工作的代码吗？

Answer 1

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

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

固定div应该是可滚动的

1 个答案: