如何让并排卡片自动保持等高（无需繁琐媒体查询）-html教程-PHP中文网

如何让并排卡片自动保持等高（无需繁琐媒体查询）

使用 CSS Grid 或 Flexbox 配合 height: 100% 与 calc() 动态计算内容区高度，可让相邻卡片在不同屏幕尺寸下自动对齐高度，彻底摆脱依赖多套媒体查询调整 min-height 的困境。

使用 css grid 或 flexbox 配合 `height: 100%` 与 `calc()` 动态计算内容区高度，可让相邻卡片在不同屏幕尺寸下自动对齐高度，彻底摆脱依赖多套媒体查询调整 `min-height` 的困境。

在响应式卡片布局中，常见需求是让同一行的多个卡片（尤其是带重叠图像的“垂直叠加卡”）高度一致——即使其中文本长度不一。传统做法如设置固定 min-height 或为各断点编写大量媒体查询，不仅维护成本高，且无法适应动态内容变化。

推荐方案：基于容器高度的精准计算 + 现代布局模型

核心思路是：让卡片内容区域（.vertical-overlap-card-body）占满父容器剩余高度。由于 .vertical-overlap-card 中图片采用绝对定位上浮（margin-bottom: -6rem），实际视觉占用高度 ≠ 其 CSS height 值，因此需用 calc() 精确补偿：

悟道

悟道是一款AI大模型工具，智源“悟道”大模型，中国首个+世界最大人工智能大模型。

下载

.vertical-overlap-card-body {
  /* …其他样式… */
  height: calc(100% - 280px + 6rem); /* 关键：100%减去图片原始高度，再加回被抵消的负边距 */
}

⚠️ 注意事项：

height: 100% 生效的前提是所有父级元素（包括 .grid__col 和 .vertical-overlap-card）均显式声明 height: 100% 或 display: flex/display: grid 并设 align-items: stretch；
示例中已通过 .grid__col > .--fit-to-col { height: 100%; } 和
实现继承链；
图片尺寸变更（如响应式媒体查询中 280px → 250px）时，必须同步更新 calc() 中的像素值，否则高度错位；
更健壮的替代方案是改用 CSS Grid 自动等高列（无需手动计算）：

.grid.--med-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Grid 默认使子项等高，无需额外 height 计算 */
}

.vertical-overlap-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vertical-overlap-card-body {
  flex: 1; /* 自动填满剩余空间 */
  padding-top: 6rem;
}

✅ 最佳实践总结：