垂直拆分弹出框内容

Question

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

我已经使用堆栈闪电战对这种行为进行了以下尝试： https://stackblitz.com/edit/ionic-4k2dbz

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

Answer 1

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

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

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

但是，当在跨多个设备的离子应用程序中进行测试时，我认为，根据屏幕尺寸等，它可能会变得有点混乱。因此，您可以考虑使用基于弹性框的离子网格。以下是解决方案：

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