本文详解为何 height: 70% 无效，以及如何通过 70vh 单位让容器严格占据屏幕高度的 70%，同时保持文档流、兼容动画与响应式布局。
本文详解为何 `height: 70%` 无效，以及如何通过 `70vh` 单位让容器严格占据屏幕高度的 70%，同时保持文档流、兼容动画与响应式布局。
在 CSS 布局中，常遇到这样的需求：让一个包含图片的
容器精确撑满视口（viewport）高度的 70%，例如用于全屏轮播图或首屏横幅。但直接写 height: 70% 往往失效——这不是浏览器 Bug，而是 CSS 百分比高度的固有计算规则所致。
? 为什么 height: 70% 不起作用？
CSS 中，
百分比高度（height: X%）始终相对于其父元素的计算高度（computed height）
。若父元素未显式设定高度（如 html 或 body 缺少 height: 100%），或父元素高度由内容撑开（即 height: auto），则子元素的 70% 将解析为 0px —— 因为“70% of auto” 无意义，浏览器默认回退为 auto。
即使你为 .gallery 设置了 height: 70%，只要其祖先链中任意一级（如 body → html）未定义明确高度，该声明即失效。
✅ 正确解法：使用 vh 视口单位
vh（viewport height）是 CSS3 引入的相对单位，
`1vh = 1% 的视口高度
。因此：
立即学习
“
前端免费学习笔记（深入）
”；
配合 HTML 结构即可生效：
✅ 优势显著：
无需绝对定位
：不脱离文档流，不影响后续元素布局；
天然响应式
：随窗口缩放自动重算，适配移动端；
兼容动画
：vh 是可动画属性（如 transition: height 0.3s），完美支持 fade 等 CSS 动画类；
语义清晰
：意图直白，优于 hack 式的 position: absolute 或 JS 动态计算。
⚠️ 注意事项与最佳实践
避免混用 % 与 vh 在同一上下文中
：例如 min-height: 70% + height: 70vh 可能引发冲突，建议统一使用 vh。
确保图片加载安全
：object-fit: cover 要求父容器有明确尺寸（70vh 已满足），否则可能显示异常；可加 img { display: block; } 消除底部间隙。
移动端兼容性
：vh 在所有现代浏览器（Chrome 20+、Firefox 19+、Safari 6.1+、Edge 12+）中均受支持；iOS Safari 早期版本存在 vh 在地址栏展开/收起时未重绘问题，可通过 height: -webkit-fill-available 回退（但多数场景已无需）。
无障碍提示
：为图片添加有意义的 alt 属性，并考虑为 .gallery 添加 role="region" 和 aria-label（如 aria-label="主视觉图"），提升可访问性。
? 总结
当目标是“占屏幕高度的 X%”，请坚定选择 Xvh —— 它语义准确、行为确定、无需 JS 干预，且完全符合现代 CSS 设计哲学。放弃对 height: X% 的执念，转而理解 vh/vw/vmin/vmax 这套视口单位体系，是构建真正响应式、高性能 Web 界面的关键一步。
.gallery {
display: block;
width: 100%;
height: 70vh; /* ✅ 精确等于屏幕高度的 70% */
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持宽高比，裁剪填充 */
}