如何在CSS中正确设置盒模型的最小高度min-height以兼容不同屏幕？-css教程-PHP中文网

min-height在小屏下失效的根本原因是父容器无明确高度，导致百分比值计算为0；需确保html/body设height:100%或100vh，优先用100dvh兼容ios地址栏变化，并配合box-sizing:border-box和flex-shrink:0保障生效。

如何在css中正确设置盒模型的最小高度min-height以兼容不同屏幕？

常见现象是写了 min-height: 400px，但在手机上盒子还是塌成一条线。根本原因不是属性不生效，而是父容器没高度——min-height: 100% 这类百分比值依赖父级有明确高度，而默认情况下 html 和 body 没设高，导致百分比计算结果为 0。

min-height 只作用于内容区（content area），padding 和 border 会额外增加元素总高度。如果你希望“整个盒子”至少高 300px，又加了 padding: 20px，那实际内容区只需 260px 就够——但人眼看到的是 300px 总高，容易误判。

用 box-sizing: border-box 后，min-height: 300px 就真指整个盒子最小高 300px，含 padding 和 border
务必全局重置：* { box-sizing: border-box; }，避免个别元素漏设导致高度错乱
注意：flex 容器子项即使设了 box-sizing: border-box，仍受 flex-shrink: 1 影响，可能压缩到低于 min-height，需额外加 flex-shrink: 0

固定像素（px）在小屏上容易撑出横向滚动条，纯百分比又受限于父级，真正灵活的是组合用法。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

单页主区域常用：min-height: 100vh，但 iOS 上可加兜底：min-height: 100%; min-height: 100vh（后者覆盖前者）
卡片或模块类容器推荐：min-height: min(300px, 80vh)，既保底 300px，又防大屏拉太高
文字容器慎用 vh：字体缩放或系统字号放大时，vh 不随文本变大，可能导致截断，此时 min-height: 20em 更可靠

现代项目基本不用管 IE6，但如果真要兼容，min-height 在 IE6 下完全无效，只能靠 hack。

IE6 下用 height 模拟：height: auto !important; height: 200px; min-height: 200px; —— IE6 忽略 !important 后面的 height，但识别第一个 height；其他浏览器优先用 min-height
更干净的做法是用 JavaScript 检测：if (!document.documentElement.style.minHeight) { el.style.height = '200px'; }
注意：IE7+ 已支持 min-height，无需 hack，只对 IE6 单独处理即可