Question

所以我想创建一个＆＃34;弹出窗口＆＃34;这包括一些设置，所以它不会在整个网站上混乱，但当我用固定的div做它不可滚动，所以一些用户无法看到一切。继承我的代码：

HTML：

<body>
<div id="settings"> <div id="settingsContent">
<div style="height: 2000px;"> test </div>
</div> </div>

CSS：

#settings {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#settingsContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F3F3F3;
border: 3px solid #111111;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
position: auto;
}

我尝试使用overflow-y: scroll;但是我只能向下滚动但不能向上滚动。有没有办法解决这个或替代方案？

Answer 1

将max-height: 100%;添加到div#settingsContent。这样可以防止它与包含div重叠。

您还应该添加overflow-y: scroll;，然后移除position: auto;，这不是有效的位置值。

这是笔：https://codepen.io/jaredloson/pen/OEOLre

滚动固定的div

1 个答案: