防止模态div离开屏幕

Question

Link

模态位于屏幕中间（顶部稍微偏离中心以考虑浏览器UI等）。

如果您将浏览器窗口的大小调整为小于div的高度，则它会离开屏幕。我可以使用什么方法使其停在顶部，然后让用户滚动元素以查看所有内容？

.modal {
   position: absolute;
   height: 400px;
   width: 400px;
   margin-top: -200px;
   margin-left: -200px;
   top: 47%;
   left: 50%;
}

Answer 1

尝试使用media css选项：

@media (max-height: 400px) {
 .login{
   overflow-y: scroll !important;
   margin: 0 auto !important;
   position: static !important;
  }
}