全屏区块高度不占满视口的常见原因包括body默认margin、父容器未设高度、iOS Safari对vh的动态修正、min-height限制未清除等；推荐优先使用100dvh+flex布局，老浏览器保底用JS动态设置window.innerHeight。
全屏区块高度不占满视口的常见原因
多数时候不是代码没写对，而是浏览器默认行为或 CSS 层叠干扰了 height: 100vh 的实际效果。比如： 有默认 margin、父容器未设高度、移动端 Safari 对 vh 单位的动态修正（地址栏收放导致视口高度跳变），或者用了 min-height 却忘了清除其他高度限制。
height: 100vh 够用但要注意兼容性细节
这是最直接的方式，但必须确保从根元素开始“透传”高度：
-
html和body都要设height: 100%或height: 100vh，否则子元素的100vh可能按初始视口算，但被父级截断 - 移动端 iOS Safari 会把地址栏高度计入
vh，滚动后视口变化但vh不更新，导致区块“缩进”。临时解法是用100dvh（Chrome 105+ / Safari 16.4+ 支持）替代vh - 若区块内有 padding/margin/border，需配合
box-sizing: border-box，否则实际高度超 100vh
section.fullscreen {
height: 100vh;
box-sizing: border-box;
}
/ 兼容新旧设备 /
@supports (height: 100dvh) {
section.fullscreen {
height: 100dvh;
}
}
JavaScript 动态设高更适合复杂场景
当需要响应式适配、兼容老浏览器、或区块依赖内容加载完成（如图片懒加载后重排），纯 CSS 不够稳。关键不是“获取屏幕高度”，而是“获取当前可用视口高度”：
- 用
window.innerHeight而非screen.height—— 后者是设备物理分辨率，和显示无关 - 监听
resize事件，但避免高频触发，可用节流（例如用requestAnimationFrame包一层） - 如果页面有固定 header/footer，全屏区块高度应为
innerHeight - headerHeight - footerHeight，不能硬写 100vh
function setFullscreenHeight() {
const section = document.querySelector('section.fullscreen');
if (!section) return;
section.style.height = window.innerHeight + 'px';
}
setFullscreenHeight();
window.addEventListener('resize', () => {
requestAnimationFrame(setFullscreenHeight);
});
Flex 布局实现“伪全屏”更鲁棒
不依赖具体数值，靠容器分配空间，适合多区块垂直堆叠且其中一块需占满剩余高度的场景（比如 header + main（全屏） + footer）：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex; flex-direction: column - 全屏区块设
flex: 1，自动撑开填满剩余空间 - 无需 JS，无
vh兼容问题，也不怕滚动条或地址栏遮挡 - 注意：父容器本身得有明确高度来源（如
100vh或继承自html/body）
body, html {
height: 100%;
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
header { height: 60px; }
main.fullscreen { flex: 1; }
footer { height: 40px; }
实际项目里，100dvh + flex 组合覆盖大多数情况；老项目保底用 JS 动态设高；别忘了检查 body 的 margin 和 overflow 是否意外裁剪了内容。
