Question

整个popup-div是可见的，当我垂直滚动时，它会跟随。

enter image description here

只有一半的popup-div是可见的，当我垂直滚动时，它会跟随，但是不可能查看popup-div的第二部分。 如何实现这一目标？

enter image description here

css代码：

  .popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top: 20%;
    left: 20%;
    overflow: auto;
}
.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 500;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}

我正在使用ASP.NET，如果需要代码隐藏来回答这个问题，我会提供它。

我已经阅读了有关解决方案，例如将overflow参数设置为auto或scroll，但还没有让它工作。

更新如下：

现在弹出窗口可以根据需要垂直滚动，但前提是滚动条水平可见。 enter image description here

这里，由于滚动条不可见而无法垂直滚动，并且在浏览器中水平滚动只会强制popupdiv跟随。

enter image description here

Answer 1

尝试此代码（pupup的内容仅用于测试）：

<html>
<head>
<style>
.popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top:10%;
    left: 20%;
    overflow: auto;
    height:80%;
    width:40%;
}

.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 0;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}


</style>
</head>
<body>
<div class="popupbackground">
</div>
<div class="popup">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>
</body>
</html>

Answer 2

将弹出窗口的高度指定为80％和top：10％

滚动固定位置div

2 个答案: