css - 垂直拆分弹出框内容

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 中的弹出框默认占据视口(viewport)的 90%文档(最大高度 - https://ionicframework.com/docs/api/components/popover/PopoverController/ )
• 我们可以使用 max-height 来限制顶部 Pane 的 div 并设置它的溢出自动
• 我们可以使用 min-height/max-height 来固定底部 Pane div 并设置它的溢出到隐藏；
• 既然您需要 30/70 的分配，我们需要根据最多 90% 的比例进行分配Popover的高度(我下面用的是65/25)

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

但是当我在跨多个设备的 ionic 应用程序中测试上述内容时，我认为它可能会根据屏幕尺寸等而变得有点困惑。因此您可以考虑使用基于 flexbox 的 ion-grid。下面是解决方案:

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