垂直分割的Popover内容

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％的视口，具体取决于 docs（最大高度- 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。这是下面的解决方案：

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