如何防止使用绝对位置时出现顶部中断？

Question

我有一个模式，应该始终出现在页面底部。但是，无论何时其高度超过屏幕高度，其顶部区域都会被切除。我想防止这种情况。这是代码的简化版本。

<div class="modal">Modal</div>

.modal{
  position: absolute;
  width: 440px;
  height:700px;
  z-index: 9999;
  background-color: #ffffff;
  right: 20px;
  bottom: 20px;
  border: 1px solid #dbdbdb;
}

Answer 1

这就是max-height的作用。将此添加到您的模式样式中：

max-height: calc(100vh - 20px);

在此示例中，我从屏幕高度（100vh）中减去您与底部之间的间距20像素。随时根据需要进行调整。

如果模态的高度短于其内容，则需要添加：

overflow-y: scroll;