min-height 设置元素最小高度，防止内容少时塌陷；max-height 限制最大高度，避免内容过多时布局失控。两者结合可实现自适应高度范围，配合 overflow 实现滚动，适用于响应式设计中的卡片、文本区等场景。相比固定 height，更灵活安全，提升页面布局适应性与用户体验。
在CSS中，max-height 和 min-height 是用来控制元素高度范围的两个重要属性。它们可以单独使用，也可以结合使用，确保元素在不同内容量或屏幕尺寸下保持合理的布局表现。
min-height：设置最小高度
min-height 指定一个元素内容区的最小高度。即使内容很少，元素也会至少达到这个高度。
常见用途：防止空容器或内容少的区域塌陷 保证卡片、按钮或布局区块有统一的视觉高度 配合弹性布局（Flexbox）实现等高列
示例：
Shrink.media
Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具
123 查看详情
div { min-height: 200px;}
即使 div 中没有内容，它也会显示为至少 200px 高。
立即学习“前端免费学习笔记（深入）”；
max-height：设置最大高度
max-height 限制元素的最大高度。当内容超出时，元素不会继续拉伸，而是可能触发滚动或溢出处理。
典型场景：防止图片或长文本撑开整个页面 配合 overflow 实现可滚动区域 响应式设计中限制模态框或下拉菜单的高度
示例：
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 往往更安全。
基本上就这些。合理使用这两个属性，能让你的页面在各种内容情况下都保持良好的视觉结构和用户体验。不复杂但容易忽略细节。
以上就是在css中如何用max-height和min-height控制高度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029499.html
微信扫一扫 
支付宝扫一扫 
