如何让Ionic 4的ion-col组件保持相同高度

我来帮你搞定这个同一行小卡片高度对齐的问题！你现在的问题在于虽然给ion-col设置了100%高度，但卡片本身的高度继承逻辑没走通，而且Ionic的flex布局需要更明确的拉伸配置。

问题分析 #

你的现有CSS里，.small-card用了height: inherit，但inherit是继承父元素（ion-col）的计算高度，而如果ion-row没有强制让列拉伸，ion-col的高度可能还是由内容决定，导致inherit不起作用。另外，卡片内部的ion-card-content也没有撑满卡片高度，会让卡片看起来比实际列高要矮。

解决方案 #

修改你的CSS，让整个布局的flex拉伸逻辑生效：

/* 确保ion-row强制让列拉伸到同一高度 */
ion-row {
  width: 100%;
  height: auto;
  align-items: stretch; /* 关键：让所有子列拉伸到行的最大高度 */
}

/* 让ion-col占满行的高度，同时保持你的边距设置 */
ion-col {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

/* 小卡片占满ion-col的全部高度 */
.small-card {
  margin: 3px;
  height: 100%; /* 替换inherit为100%，确保占满父容器 */
  display: flex;
  flex-direction: column; /* 让卡片内容垂直布局 */
}

/* 让卡片内容撑满卡片高度，避免内部内容未填满导致卡片高度不足 */
.small-card .ion-card-content {
  flex: 1; /* 自动填充剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 保持内容居中，和你原来的布局一致 */
}

为什么这样修改？ #

• align-items: stretch：这是ion-row的关键设置，它会让所有子元素（ion-col）拉伸到当前行的最大高度，确保同一行的列高度完全一致。
• .small-card设置height: 100%+flex布局：让卡片完全占满ion-col的高度，同时内部内容用flex垂直排列，保证内容居中且撑满卡片。
• .small-card .ion-card-content用flex:1：让卡片内容区域自动填充卡片的剩余高度，即使内容少，也会撑满整个卡片，避免卡片因为内容短而变矮。

验证效果 #

修改后，同一行的ion-col会自动取该行的最大高度，里面的小卡片也会跟着撑满整个列的高度，不管内容长短，所有卡片都会对齐啦！

内容的提问来源于stack exchange，提问作者Faouzi