垂直拆分弹出框内容

Question

我的目标是让 Ionic 3 Popover 具有“顶部”和“底部”。我想占据顶部，假设 PopOver 的顶部 70% 和底部占据，假设 PopOver 的底部 30%。我想将任意内容放在顶部，如果该内容超过分配给顶部的垂直空间，它可以滚动。底部内容是固定的，无论顶部滚动如何，都应该始终存在，并且应该从不有与之关联的滚动条。

我使用 stackblitz 对这种行为进行了以下尝试： https://stackblitz.com/edit/ionic-4k2dbz

那么，我该如何更改 components/my-popover/my-popover.html 或 components/my-popover/my-popover.scss 的内容以实现上述布局/行为？

Answer 1

如果真的很快，我会这样想：

• 默认情况下，Ionic 中的弹出框占据视口的 90%，具体取决于 文档（最大高度 - https://ionicframework.com/docs/api/components/popover/PopoverController/)
• 我们可以使用 max-height 来限制顶部窗格的 div 并设置它的溢出 自动
• 我们可以使用 min-height / max-height 来修复底部窗格 div 并设置其 溢出到隐藏；
• 现在，由于您需要 30/70 拆分，我们需要根据最大 90% 进行按比例分配 Popover 的高度（我在下面使用了 65/25）

https://stackblitz.com/edit/ionic-x3pkwv

但是，当我在上述多个设备上的 ionic 应用程序中进行测试时，我认为它可能会根据屏幕尺寸等情况变得有些混乱。因此您可以考虑使用基于 flexbox 的 ion-grid。以下是解决方案：

https://stackblitz.com/edit/ionic-ikvjiw