本文详解在 css 中实现卡片列表 100% 高度的完整方案，涵盖百分比高度失效原因、必需的继承链设置、现代布局推荐（flex/grid），并提供可直接运行的代码示例与关键注意事项。
本文详解在 css 中实现卡片列表 100% 高度的完整方案，涵盖百分比高度失效原因、必需的继承链设置、现代布局推荐（flex/grid），并提供可直接运行的代码示例与关键注意事项。
在 CSS 中，height: 100% 并非“自动填满可视区域”，而是相对于其已明确高度的父元素计算。若父容器未设置显式高度（如 height 或 min-height），子元素的 100% 将无法解析，最终退化为 auto —— 这正是你遇到问题的根本原因。
✅ 正确做法：构建完整的高度继承链
你需要确保从根向下逐层声明高度，直到目标元素。以你的 HTML 结构为例：
<div class="desc-grid__body cards-grid">
<ul class="cards-grid__list">
<li class="cards-grid__item">…</li>
<!-- 其他卡片 -->
</ul>
</div>对应的关键 CSS 如下（含注释说明）：
/* 1. 重置默认行为，确保高度可继承 */
html, body {
height: 100%; /* 必须设置，否则后续 % 高度无参考基准 */
margin: 0;
}
/* 2. 父容器需有明确高度（例如视口高度或固定值） */
.desc-grid__body {
height: 100vh; /* 或 min-height: 100vh；也可设为具体 px/em */
}
/* 3. 列表容器需继承高度，并启用弹性布局（推荐） */
.cards-grid__list {
height: 100%; /* 依赖 .desc-grid__body 的 height */
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
/* 4. 卡片项：等高分布，每项占满可用高度 */
.cards-grid__item {
flex: 1 1 calc(50% - 0.5rem); /* 响应式双列布局示例 */
height: 100%; /* ✅ 此时有效，因父 ul 有明确 height */
}
/* 5. 卡片内容区居中对齐（可选增强体验） */
.short-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}⚠️ 注意事项：
- height: 100% 不适用于 display: inline 或 inline-block 元素，务必检查 .cards-grid__item 是否被意外设为内联显示；
- 若使用 grid 布局替代 flex，可在 .cards-grid__list 上设置 display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); height: 100%;，同样要求父容器具备明确高度；
- 避免仅给 <li> 设置 height: 100% 而忽略其父级（如 <ul>）的高度定义——这正是原答案中“也可设在 .cards-grid__list”的深层含义；
- 在移动端或动态内容场景中，建议优先使用 min-height: 100vh + flex: 1 组合，兼顾兼容性与健壮性。
✅ 更简洁现代的替代方案（推荐）
如果你的目标是让所有卡片等高且自适应容器，无需手动设 height: 100%，可直接用 Flexbox 实现：
.cards-grid__list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
/* 移除 height: 100%，改用 flex 自动分配空间 */
}
.cards-grid__item {
flex: 1 1 280px; /* 最小宽度 280px，自动拉伸填满 */
display: flex;
}此时卡片高度由内容决定，但通过 display: flex + flex-direction: column 可自然撑开内部 .short-card，再配合 justify-content: center 实现垂直居中 —— 语义更清晰、维护性更强。
总结：100% 高度不是魔法，而是依赖明确的尺寸上下文。掌握高度继承规则 + 合理选用 Flex/Grid 布局，即可稳定、优雅地实现卡片等高布局。
