垂直拆分弹出框内容
Vertically Split Popover Content
我的目标是让 Ionic 3 Popover 有一个 "top section" 和一个 "bottom section." 我希望顶部部分占据，假设 PopOver 的前 70% 和要占用的底部，比方说 PopOver 的底部 30%。我想将任意内容放在顶部，如果该内容超过分配给顶部的垂直 space，则可以滚动。底部的内容是固定的，无论顶部的滚动如何，它都应该始终存在，并且永远不会有一个与之关联的滚动条。
我使用 stackblitz 对此行为进行了以下尝试：
https://stackblitz.com/edit/ionic-4k2dbz
那么，我该如何更改 components/my-popover/my-popover.html 或 components/my-popover/my-popover.scss 的内容来实现上述布局/行为？
如果真快我会这样想：
- 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
但是当我在跨多个设备的离子应用程序中测试上述内容时，我认为它可能会根据屏幕尺寸等而变得有点混乱。因此您可以考虑使用基于 flexbox 的 ion-grid。以下是解决方案：
我的目标是让 Ionic 3 Popover 有一个 "top section" 和一个 "bottom section." 我希望顶部部分占据，假设 PopOver 的前 70% 和要占用的底部，比方说 PopOver 的底部 30%。我想将任意内容放在顶部，如果该内容超过分配给顶部的垂直 space，则可以滚动。底部的内容是固定的，无论顶部的滚动如何，它都应该始终存在，并且永远不会有一个与之关联的滚动条。
我使用 stackblitz 对此行为进行了以下尝试： https://stackblitz.com/edit/ionic-4k2dbz
那么，我该如何更改 components/my-popover/my-popover.html 或 components/my-popover/my-popover.scss 的内容来实现上述布局/行为？
如果真快我会这样想：
- 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
但是当我在跨多个设备的离子应用程序中测试上述内容时，我认为它可能会根据屏幕尺寸等而变得有点混乱。因此您可以考虑使用基于 flexbox 的 ion-grid。以下是解决方案：