min-height 设置元素最小高度，防止内容少时塌陷；max-height 限制最大高度，避免内容过多时布局失控。两者结合可实现自适应高度范围，配合 overflow 实现滚动，适用于响应式设计中的卡片、文本区等场景。相比固定 height，更灵活安全，提升页面布局适应性与用户体验。
在CSS中，max-height 和 min-height 是用来控制元素高度范围的两个重要属性。它们可以单独使用，也可以结合使用，确保元素在不同内容量或屏幕尺寸下保持合理的布局表现。
min-height：设置最小高度
min-height 指定一个元素内容区的最小高度。即使内容很少，元素也会至少达到这个高度。
常见用途：- 防止空容器或内容少的区域塌陷
- 保证卡片、按钮或布局区块有统一的视觉高度
- 配合弹性布局（Flexbox）实现等高列
示例：
div {
min-height: 200px;
}
即使 div 中没有内容，它也会显示为至少 200px 高。
立即学习“前端免费学习笔记（深入）”；
max-height：设置最大高度
max-height 限制元素的最大高度。当内容超出时，元素不会继续拉伸，而是可能触发滚动或溢出处理。
典型场景：示例：
textarea {
max-height: 100px;
overflow: auto;
}
当输入内容过多时，textarea 不会无限变高，而是出现滚动条。
同时使用 min-height 和 max-height
将两者结合，可以让元素在一定范围内自适应高度，既不会太小也不会太大。
article {
min-height: 150px;
max-height: 400px;
overflow-y: auto;
}
这种设置适合动态内容区域，比如评论框、侧边栏或弹窗内容区。内容少时保持基本高度，内容多时最多显示 400px，多余部分可滚动查看。
与 height 的区别
不同于固定高度 height，min-height 和 max-height 更灵活：
- height 是“精确值”，内容超出会溢出（除非设置 overflow）
- min-height 允许内容自然增长，但不会更小
- max-height 限制增长上限，避免失控布局
在响应式和自适应布局中，优先使用 min-height 和 max-height 往往更安全。
基本上就这些。合理使用这两个属性，能让你的页面在各种内容情况下都保持良好的视觉结构和用户体验。不复杂但容易忽略细节。
