Question

我有一个带有联系表单的弹出式图层，用于显示用户点击＆＃34;联系人＆＃34;按钮。该层的编码如下：

<div id="form-overlay">
    <div class="form-layer">
        <h2>Fill This Form</h2>
        <form>
        ......Form fields, Text.....
        </form>
    </div>
</div>

相关的样式定义是：

#form-overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);z-index:100;display:none}
    @media (max-width: 750px), (max-height: 650px) {
        #form-overlay {position: absolute}
    }
.form-layer {position:relative;background-color:#eeeeee;width:90%;max-width:750px;z-index: 102;margin:20px auto;color:#333;padding:20px;font-weight:300}

问题在于，在某些语言（特别是德语，荷兰语）中，文本更长，占用多行，并且按下提交按钮，特别是在较小的笔记本电脑上。

当用户尝试滚动时，背景会滚动，但固定位置不允许表单滚动。当然，这不是理想的，因为用户无法提交表格。

如果我没有修复表单，当用户向下滚动时，深灰色覆盖层会在屏幕高度处结束然后看起来很奇怪。

问题：如何解决此问题？

Answer 1

尝试添加＆溢出：自动＆＃39;在＃form-overlay块上。它可以帮助）

Answer 2

隐藏“溢出：隐藏；”在后台启用“溢出：自动；”在前景上。

强制前景层滚动而不是背景

2 个答案: