防止模式div离开屏幕

Question

链接

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

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

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

Answer 1

尝试使用媒体css选项：

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