如何為多個離子網格分配不同的高度？

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%; 
}