min-height确保元素最小高度，避免内容过少时塌陷，max-height限制最大高度防止溢出，二者结合可实现灵活且可控的自适应布局，提升页面健壮性与用户体验。
在网页布局中，min-height 和 max-height 是控制元素高度灵活性的重要CSS属性。它们让元素能根据内容或容器变化自适应，同时保持基本的尺寸约束，避免页面错乱。
min-height：设置元素最小高度
使用 min-height 可确保元素至少达到某个高度，即使内容较少也不会塌陷。
常见应用场景：- 内容区域留白处理：比如一个文章卡片，即使文字很少，也保持一定视觉高度
- 配合弹性布局：在 flex 或 grid 布局中防止子元素被压缩过小
- 背景展示完整：某些带背景图或渐变的模块需要最低高度来保证视觉效果
示例代码：
div.card {
min-height: 120px;
padding: 16px;
background-color: #f5f5f5;
}
这样即使 div 内容为空或只有一行字，也会显示为至少 120px 高。
立即学习“前端免费学习笔记（深入）”；
max-height：限制元素最大高度
max-height 用于防止元素过高，常与溢出处理结合使用，控制内容区域不超出预期范围。
典型用法包括：- 折叠面板或弹窗内容区域，避免撑满整个屏幕
- 图文列表中限制预览内容的高度，配合
overflow: hidden实现“查看更多”功能 - 响应式设计中，在小屏幕上限制图片或视频的最大尺寸
示例代码：
div.dropdown-content {
max-height: 200px;
overflow-y: auto;
}
当内容超过 200px 时出现滚动条，容器本身不会继续拉伸，不影响其他布局元素。
组合使用：灵活又可控的高度控制
将 min-height 和 max-height 同时设置，可以让元素在指定范围内自由伸缩。
适用情况：- 聊天窗口的消息框：最少显示 4 行，最多不超过 10 行，超出可滚动
- 表格单元格内容区域：保持可读性的同时防止极端数据导致布局破坏
- 模态框主体内容区：适配不同设备，内容少时不空旷，内容多时不溢出
示例：
textarea {
min-height: 80px;
max-height: 200px;
resize: vertical;
}
用户可以拖动调整高度，但被限制在 80 到 200 像素之间。
基本上就这些。合理使用 min-height 和 max-height，能让页面更健壮、体验更自然，特别是在内容动态变化的场景下特别实用。
