如何将网格卡片列表高度设置为100%？父元素高度设置后仍无效

核心问题：高度未在DOM层级中正确传递 #

你只设置父元素高度，但中间的列表、列表项、卡片容器没有继承高度，导致卡片还是内容高度。以下是两种常见布局的解决代码：

方案1：CSS Grid布局（推荐）

通过Grid的grid-template-rows让卡片均分父容器高度，同时确保所有子元素占满对应空间：

/* 父容器设置固定高度并启用Grid */
.desc-grid__body.cards-grid {
  height: 400px; /* 替换成你需要的高度 */
  display: grid;
}

/* 列表容器占满父容器，设置网格行列 */
.cards-grid__list {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行2个卡片，可调整 */
  grid-template-rows: repeat(2, 1fr); /* 每列2个卡片，均分高度 */
  gap: 16px; /* 卡片间距，可选 */
  margin: 0; /* 清除ul默认外边距 */
  padding: 0; /* 清除ul默认内边距 */
}

/* 列表项占满网格单元格 */
.cards-grid__item {
  height: 100%;
  list-style: none; /* 清除li默认列表样式 */
}

/* 卡片容器占满列表项高度，内部内容居中 */
.cards-grid__short-card.short-card {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5; /* 可选，方便查看高度效果 */
}

/* 清除卡片内容的默认边距 */
.short-card__content {
  text-align: center;
  margin: 0;
}

方案2：Flexbox布局

如果用Flex布局，通过flex属性和高度分配实现：

.desc-grid__body.cards-grid {
  height: 400px; /* 目标高度 */
}

.cards-grid__list {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.cards-grid__item {
  flex: 0 0 50%; /* 每行2个卡片，宽度占比50% */
  height: 50%; /* 每列2个卡片，高度占比50% */
  list-style: none;
  padding: 8px; /* 替代gap，需配合box-sizing */
  box-sizing: border-box;
}

.cards-grid__short-card.short-card {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.short-card__content {
  text-align: center;
  margin: 0;
}

额外检查项 #

用浏览器开发者工具（F12）查看元素的计算样式，确认是否有其他CSS规则（比如min-height、更高优先级的选择器）覆盖了你的高度设置，如有需要可以用!important临时测试（不推荐长期使用，建议调整选择器优先级）。

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