本文详解为何 height: 70% 无效，以及如何通过 70vh 实现 div 精确占据屏幕高度的 70%，同时保持文档流、兼容动画与响应式布局。
本文详解为何 `height: 70%` 无效，以及如何通过 `70vh` 实现 div 精确占据屏幕高度的 70%，同时保持文档流、兼容动画与响应式布局。
在 Web 开发中，常需让某个容器（如图片画廊区域）严格占据视口（viewport）高度的固定比例（例如 70%）。但若直接使用 height: 70%，往往发现样式无效果——这是因为 CSS 中的百分比高度是相对于父元素内容高度计算的，而非相对于屏幕。当父元素（如
或 ）未显式设置高度，或其高度由子内容自然撑开时，70% 就会退化为 0，导致子元素高度失效。✅ 正确解法：使用 CSS 视口单位（Viewport Units）
vh（viewport height）表示视口高度的 1%，因此 70vh = 当前屏幕可见区域高度的 70%。它不依赖父级尺寸，直接锚定浏览器窗口，语义清晰、行为可预测，且完全保留在标准文档流中——无需 position: absolute，不会破坏页面布局或影响其他元素的 margin/padding 行为。
以下是推荐的完整实现方案：
.gallery {
display: block;
width: 100%;
height: 70vh; /* ✅ 关键：替代 height: 70% */
overflow: hidden; /* 可选：防止图片溢出 */
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持宽高比并填满容器 */
display: block; /* 移除 img 默认的底部空白 */
}
<div class="gallery fade"> <img src="https://picsum.photos/1200/800?x-oss-process=image/resize,p_40" alt="Gallery image"> </div>
⚠️ 注意事项：
- vh 是动态响应的：当用户缩放页面、切换横竖屏或调整浏览器窗口大小时，70vh 会自动重算，天然适配响应式场景；
- 移动端兼容性良好：现代所有主流浏览器（Chrome、Firefox、Safari、Edge ≥16）均原生支持 vh，iOS Safari 自 iOS 8+ 亦稳定支持；
- 慎用 100vh 与地址栏：在部分移动浏览器中（如 Safari），100vh 可能包含地址栏区域，导致内容被遮挡；若需“视觉满屏”，建议配合 min-height: 100vh 或 JavaScript 动态修正；
- 避免混用 % 与 vh 在同一上下文：例如父容器用 % 高度而子用 vh，虽可行，但逻辑耦合度升高，推荐统一采用视口单位或 Flex/Grid 布局提升可维护性。
? 进阶提示：若需更精细控制（如留白、内边距或响应式断点），可结合 CSS 自定义属性与媒体查询：
:root {
--gallery-height: 70vh;
}
.gallery {
height: var(--gallery-height);
}
@media (max-width: 768px) {
:root { --gallery-height: 50vh; }
}
综上，70vh 是解决“按屏幕比例设高”问题的标准、简洁且健壮的方案。它既规避了绝对定位带来的布局风险，又完美兼容图片动画、object-fit、Flex/Grid 容器等现代特性，是响应式图像容器开发中的必备实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
