固定的 div 应该是可滚动的答案

【问题标题】：Fixed div should be scrollable固定的 div 应该是可滚动的
【发布时间】：2017-10-03 15:36:42
【问题描述】：

我的代码中有以下结构：

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

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

如果我用这种结构打开网站，图层会打开，但我不能滚动或滑动（不管我是在手机还是浏览器上查看网站）。

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

我需要对滚动/滑动正常工作的代码进行哪些更改？

【问题讨论】：

您的 CSS 引用了一个 ID 为 containerContentLayer 的元素，但您的 HTML 中不存在这样的元素。

标签： html css scroll fixed

【解决方案1】：

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

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

【讨论】：