html - 如何防止使用绝对位置时顶部被切断？

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;