Question

我已经看到了一些尝试解决这个问题的例子，但我似乎无法找到一个完全有效的例子。我正在尝试在屏幕中央创建一个对话框作为叠加层。示例1仅在对话框适合查看器的屏幕高度时。在示例2中固定位置将不允许在增加的高度上滚动。如果我将叠加位置更改为绝对并将对话框更改为相对，则它会解决高度/滚动问题，除非我向下滚动视图外部分不是叠加示例3的一部分。

example1 https://jsfiddle.net/jdjmmzd6/1/

example2 https://jsfiddle.net/jdjmmzd6/2/（覆盖高度更改为500）

example3 https://jsfiddle.net/jdjmmzd6/（覆盖绝对和对话相对）

示例1如下所示：

<html>

<style>

.overlay {
 position:fixed;
 z-index:9999;
 background-color:rgba(0,0,0,0.5);
 text-align:center;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
}

.popup {
 margin:0;
 position:absolute;
 top:50%;
 left:50%;
 -ms-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%);
 background:#fff;
 width:50%;
 height:200px;
}

</style>

<body>
 <div class="overlay">
  <div class="popup">Hello World</div>
 </div>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
</body>

</html>

Answer 1

如果您希望对话框有自己的滚动，则需要为其设置容器。然后，从那里，您可以在容器上设置特定高度，并能够滚动（overflow-y: scroll），然后在内部div上设置更大的高度。这使您可以自定义它们在内部div中滚动的程度。

请注意，因为我们在原始对话框周围添加了容器，所以我们需要将定位逻辑移动到dialog-container。您的示例1适用于定位，但您真正想知道的是如何使对话框可滚动。

这是jsFiddle：https://jsfiddle.net/augburto/085k68pa/

内联代码示例

.overlay {
 position:fixed;
 z-index:9999;
 background-color:rgba(0,0,0,0.5);
 text-align:center;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
}

.dialog {
 height:500px;
}

.dialog-container {
  posiiton: relative;
  width:50%;
  overflow-y: scroll;
  height: 200px;  
  margin:0;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  background:#fff;
}

<body>
 <div class="overlay">
  <div class="dialog-container">
    <div class="dialog">Hello World</div>
  </div>
  </div>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
 page<br>filler<br>page<br>filler<br>page<br>filler<br>
</body>

Answer 2

如果我理解正确，您希望整个页面使用模态滚动。在这种情况下，使用：

代替宽度和高度100％

top:0px;
left:0px;
bottom: 0px;
right: 0px;

确保相对于模态的容器元素添加位置（在您的情况下为body）。

body {
  position: relative;
}

小提琴here

如何在css

2 个答案: