在不滚动整个页面的情况下滚动叠加的div

Question

在不滚动整个页面的情况下滚动叠加的div

8

我有一个主页面包含一些内容。随后弹出一个模态框，其长度超过了屏幕本身，因此需要滚动才能查看。我需要如何调整我的CSS使得只有模态框的

元素滚动而不是整个页面呢？

以下是模态框的CSS：

#overlay {
    visibility: hidden;
    position: absolute;
    left: 45%;
    width:auto;
    border:1px solid #A17E13;
    height:auto;
    text-align:left;
    z-index: 1000; 
}
#overlay div {
    background-color:#FCFBEC;
}

这里是HTML代码：

<html><body>
    <div>main page</div>
    <div id="overlay">
    <div>
        <div>
             <asp:Label ID="test">Text for modal here</asp:Label>
        </div>
    </div>
    </div>
</body></html>

- user541597

1

你的代码呢？从你展示的内容中无法看出其结构。 - Sven Bieder

结构很简单，主要是一个div和一个用于模态框的独立div。 - user541597

你能限制模态框的大小只能是屏幕大小，不能更大吗？ - Eric Goncalves

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caramba · Accepted Answer

除了模态框，整个页面是否不能滚动？如果是这样，请在页面上尝试使用position:fixed;。模态框必须使用position:absolute;放在外面。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#overlay {
    /*visibility: hidden;*/
    position: fixed;
    left: 45%;
    width:auto;
    border:1px solid #A17E13;
    height:900px;
    text-align:left;
    background-color:orange;
}
.scroller {
    height:3000px;
    width:400px;
    background-color:green;
}
</style>
</head>
<body>
    <div id="overlay">
        this is not moving
    </div>

    <div>
        <div class="scroller">
             <asp:Label ID="test">This is moving if big enough</asp:Label>
        </div>
    </div>
</body>
</html>

Fiddle here