我的应用程序中有一个模态对话框,它在y方向上会很长.这会带来一个问题,即对话框的一些内容隐藏在页面底部.

在此处输入图像描述

我希望窗口滚动条滚动对话框时,它是显示和太长,不适合在屏幕上,但留下的主体在后面的模式.如果你用Trello,那么你知道我想要什么.

这在不使用JavaScript控制滚动条的情况下是可能的吗?

以下是迄今为止我应用于模态和对话框的CSS:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

推荐答案

try :

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

它将安排您的模式,然后给它一个垂直滚动

Css相关问答推荐

Chrome/MacOS和Firefox/MacOS能够使用两种字体的字形渲染字符串,但Chrome/iOS和Safari/Any不能

沿浮动形状—面元素外路径将文字垂直居中""

Primeng Angular更改p-dialog背景 colored颜色

如何将CSS动画从第一列移动到第二列?

使用 CSS 定位悬停/弹出 div - 字形浏览器网页

Img 未拉伸以满足所需的纵横比

包含tailwind 中固定纵横比框的内容

CSS:菜单图标动画

CSS3 - RotateY() 居中

当我进入登录页面时,它处于桌面模式(响应式设计消失)

CSS 使文本扩展并保持居中与圆形扩展 div 的问题

页脚上方的图像分隔线使用 ::before 伪元素

如何将 .btn-group 从 twitter-bootstrap 居中?

HTML/CSS 中的单选/复选框对齐

字体上的 Font-Awesome 错误 404

rotate3d 速记

如何仅使用 CSS 制作网格(如方格纸网格)?

Select 器.class.class和.class.class有什么区别?

CSS 悬停与 JavaScript 鼠标悬停

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?