如何为多个离子网格分配不同的高度？

Question

情况：我有一个 Ionic/Angular 应用程序。 正如您在附加图像和 Stackblitz 中看到的那样，我有一个由ion-grid组成的屏幕，一种绿色和另一种红色背景色。

目标：我想为每个人分配一个百分比高度，例如：70% 给绿色的，其余 30% 给红色的。 这样，红色部分应该可以滚动才能阅读所有文本。 这意味着“全局”滚动条不应该存在，只存在于红色区域。

我尝试过的：我尝试了不同的ion-row和ion-col的配置，甚至将红色网格设置为position:fixed或position:sticky ，但我对绿色网格的位置不满意，它与红色重叠，我不知道如何将它放在红色下面（垂直旁边）。

Stackblitz： https ://stackblitz.com/edit/ionic-t8maqc

任何帮助将非常感激！

Answer 1

您可以为每个网格使用自己的样式。

例如，在您的 html 文件中，您可以有这样的内容：

<ion-grid class="greenGrid">
    *your code here*
</ion-grid> 
<ion-grid class="redGrid">
    *your code here*
</ion-grid>

然后在此 html 文件的 css 文件中，此代码：

.greenGrid {
    background: green;
    height: 70%; 
}

.redGrid {
    background: red;
    height: 30%; 
}