CSS min-height的中文翻译确实是CSS最小高度，它是层叠样式表中用于定义元素最小高度值的属性，在页面布局场景中应用十分广泛。
CSS min-height的基本定义
min-height属于CSS盒模型相关的属性，作用是给元素设置一个最小的高度阈值。当元素内部的内容高度小于这个阈值时，元素会保持设定的最小高度；如果内容高度超过这个阈值，元素的高度会随内容自动撑开，不会受到最小高度的限制。
它的语法格式非常简单，支持多种单位赋值：
/* 数值加单位的形式 */
.box {
min-height: 200px;
}
/* 百分比形式，基于父元素的高度计算 */
.container {
min-height: 50%;
}
/* 使用视口单位 */
.header {
min-height: 10vh;
}
min-height的常见使用场景
1. 固定区域最小高度
比如页面的底部版权区域，即使内容很少，也需要保持固定的高度，避免页面底部留白过多，这时候就可以用min-height来设置。
.footer {
min-height: 120px;
background-color: #f5f5f5;
text-align: center;
line-height: 120px;
}
2. 响应式布局适配
在移动端页面中，有些内容区域需要根据屏幕高度自适应，但又不能太矮影响展示，就可以结合视口单位设置min-height。
.content {
min-height: 60vh;
padding: 20px;
}
3. 避免元素高度塌陷
当父元素内部子元素浮动时，父元素可能会出现高度塌陷的问题，给父元素设置min-height可以在一定程度上避免这个问题，当然更推荐配合overflow或者清除浮动的方式使用。
.parent {
min-height: 100px;
overflow: hidden;
}
.child {
float: left;
width: 50%;
height: 80px;
}
min-height和其他高度属性的区别
很多开发者会混淆min-height、height、max-height这三个属性，三者的区别如下：
| 属性名 | 作用 | 优先级 |
|---|---|---|
| height | 设置元素的固定高度 | 当内容高度超过height时，默认会溢出，除非设置overflow |
| min-height | 设置元素的最小高度 | 如果同时设置height和min-height，min-height的优先级更高 |
| max-height | 设置元素的最大高度 | 如果内容高度超过max-height，元素高度不会继续增加，内容会溢出 |
注意事项
- min-height不支持负值，赋值的时候如果写负数，样式会失效。
- 如果父元素没有设置明确的高度，子元素使用百分比的min-height可能无法生效，这时候需要给父元素设置具体高度或者min-height。
- 在Flex布局中，min-height的默认行为可能会被改变，需要结合flex-shrink等属性调整，避免预期外的高度变化。
总结来说，CSS min-height的中文翻译就是CSS最小高度，它是控制元素高度下限的实用属性，掌握它的用法能让页面布局更加灵活可控。
CSSmin-height最小高度前端样式修改时间：2026-06-17 03:48:24