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

Question

我试图在CSS中实现以下“材质设计”对话框。这直接来自Material Design Specifications：

对话框应该响应扩展以适应屏幕，但不会溢出屏幕（它应该滚动）。

---

我无法为其找到合适的响应式CSS解决方案

以下是我尝试过的内容（点击展开）：

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

但是，顶栏和底栏不会粘在对话框的顶部和底部（而是会滚动）。

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

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

Answer 1

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

Dialog topbar
/* remove styles */

Dialog bottombar
/* remove styles */

Dialog content
max-height: 50%
overflow: auto

Dialog frame
position: absolute
top: 20%