离子网格 2 列，其中固定的左列和右列是可滚动的

【问题标题】：Ionic grid 2 columns where left column in fixed and right column is scrollable离子网格 2 列，其中固定的左列和右列是可滚动的
【发布时间】：2022-02-11 02:59:28
【问题描述】：

我无法找到任何有关其工作原理的文档。在它最简单的形式中，我想让下面的代码使左列静止（或者也可能独立滚动）而右列滚动。这是一个 Ionic 4 / Angular 11 应用程序。

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col size="6">
    
This column does not scroll
    
    </ion-col>
     <ion-col size="6">
  
This column does scroll when it exceeds screen height
     
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

【问题讨论】：

标签： html angular typescript ionic-framework ionic4

【解决方案1】：

类似https://stackblitz.com/edit/ionic-angular-v5-3yiyi7？简而言之，这一切都在 css 中：使用 overflow-y 属性并添加查看是否要使用 display 显示滚动条。另外，请注意 css 中浏览器之间的差异。

【讨论】：

这似乎有效。有没有办法将 CSS 中的高度设置为正在显示的屏幕的高度（变量）？
您可以尝试使用height: 100vh，其中vh 代表视口高度，或者尝试使用vmin（视口最小长度）和vmax（视口最大长度）。