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

Posted 2023-02-22

【中文标题】CSS中的滚动材质设计对话框

【英文标题】：Scrolling material design dialog box in CSS

【发布时间】：2015-06-22 05:42:36

【问题描述】：

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

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

---

我找不到合适的响应式 CSS 解决方案

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

此对话框会展开以正确适应不同的屏幕尺寸而不会溢出，并且在content 溢出dialog frame 时还提供滚动条。

但是，topbar 和 bottombar 不会粘在对话框框架的顶部和底部（它们会滚动）。

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

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

【参考方案1】：

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

Dialog topbar
/* remove styles */

Dialog bottombar
/* remove styles */

Dialog content
max-height: 50%
overflow: auto

Dialog frame
position: absolute
top: 20%

【讨论】：

感谢您的快速回复。这似乎不起作用，因为max-height: 50% 实际上在绝对框架内不起作用。看到这个 jsfiddle：jsfiddle.net/vto0k91m/2

哦，是的，你是对的。我认为您的框架需要一些默认高度。

不幸的是，它没有响应，所以我想我需要一个不同的解决方案。还是谢谢！

我只能用 javascript 通过手动设置内容最大高度来解决这个问题：$('.content').css('max-height', $('.modal-background').height() *.6 - 90); 我很好奇是否有人可以在没有 javascript 的情况下解决它。