允许模态窗口滚动

Question

我在配置模式以允许在内容溢出时滚动时遇到问题。我尝试将“overflow：auto”添加到模式中，但它不起作用。请注意，我没有使用 Bootstrap。我确实添加了 css 以防止模式打开时背景滚动。这可能就是我无法滚动模式的原因。请参阅下面我正在使用的 CSS。

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background-color);
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: var(--modal-content-background-color);
    overflow: auto;
    border-radius: 10px;
    color: var(--modal-font-color);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: auto;
    width: auto;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    z-index: 1000;
}

任何帮助将不胜感激。谢谢你。

Answer 1

您可以将

max-height

设置为指定值，这样您的内容就会滚动。截至目前，您已将

height

设置为

height: auto;

，这意味着您的模式始终尝试获得视口可以具有的最大高度。