html – 滚动叠加div而不滚动整个页面

发布时间：2020-12-14 16:43:16 所属栏目：资源来源：网络整理

导读：我有一个主页面上有一些内容.然后我有一个弹出的模态比屏幕本身长,所以我必须滚动才能看到它.我需要做什么才能使我的CSS只进行模态div滚动而不是整个页面？这是模态的CSS #overlay { visibility: hidden; position: absolute; left: 45%; width:auto; borde

我有一个主页面上有一些内容.然后我有一个弹出的模态比屏幕本身长,所以我必须滚动才能看到它.我需要做什么才能使我的CSS只进行模态div滚动而不是整个页面？

这是模态的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>

解决方法

除了模态div之外,整个页面是不是可滚动的？如果是这样你可以尝试位置：固定;在页面上.模态必须在位置之外：绝对;

<!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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!