所以我想创建一个包含一些设置的“弹出窗口”，这样它就不会在整个站点上乱七八糟，但是当我使用固定的 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; 但后来我只能向下滚动而不能向上滚动。有没有办法解决这个问题或替代方案？
最佳答案
将 max-height: 100%; 添加到 div#settingsContent。这将防止它与包含的 div 重叠。
您还应该添加回 overflow-y: scroll;，并删除 position: auto;，这不是有效的位置值。
关于html - 在固定的 div 中滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50898261/