WHAT - CSS 中的 min-height

在 WHAT - CSS 中的 min-width 中我们已经详细介绍过 width。对于高度， CSS 同样提供一个 min-height.

min-height 是 CSS 中用于设置元素的 最小高度 的属性，作用和 min-width 类似：

即使内容较少或外部布局试图压缩高度，元素的高度也不会小于 min-height 指定的值。

语法

selector {
  min-height: <length> | <percentage> | auto;
}

---

常见用途

1. 防止元素被压缩得太小

.card {
  min-height: 200px;
}

即使里面没有内容，也至少会保持 200px 高度。

2. 配合 Flexbox 保证高度

.container {
  display: flex;
  min-height: 100vh; /* 页面至少占满一整屏 */
}

3. 用于内容区域动态撑高但不塌陷

.content {
  min-height: 300px;
}

• 如果内容高于 300px，则自动扩展；
• 如果内容不足 300px，则高度固定为 300px。

与其他属性的区别

属性	作用
height	设置精确高度
max-height	设置最大高度
min-height	设置最小高度 ✅

提示

• min-height: 0 是默认值，表示没有最小限制。
• 在 flex 或 grid 子项中，如果你发现高度没有像预期那样收缩或撐开，检查是否需要设置 min-height: 0。