首页 文章

在CSS中滚动材质设计对话框

提问于
浏览 次
3

我正在尝试在CSS中实现以下Material Design对话框 . 这直接来自Material Design Specifications：

enter image description here

对话框应响应扩展以适应屏幕，但屏幕（它应该滚动） .

我无法为它找到一个体面的响应式CSS解决方案

这是我尝试过的（点击展开）：

enter image description here

此对话框可以正确扩展以适应不同的屏幕大小而不会溢出，并且当 content 溢出 dialog frame 时也会提供滚动条 .

BUT ，顶栏和底栏不会粘在对话框的顶部和底部（它们会滚动） .

由于对话框的 content 是不确定的，我不能只使用固定的页眉和页脚，因为对话框本身可能会根据内容扩展或缩小 .

有没有办法在CSS中创建这个响应式对话框？

css modal-dialog material-design

1 回答

  • 0

    不要将顶部栏和底栏放在内容之上，而应将它们放在内容的上方/下方，如下所示：

    Dialog topbar
/* remove styles */

Dialog bottombar
/* remove styles */

Dialog content
max-height: 50%
overflow: auto

Dialog frame
position: absolute
top: 20%
    回复于

相关问题