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

【问题标题】：How to assign different height to multiple ion-grid's?如何为多个离子网格分配不同的高度？
【发布时间】：2019-11-30 08:21:27
【问题描述】：

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

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

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

任何帮助将不胜感激！

【问题讨论】：

【解决方案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%; 
}

【讨论】：