17370845950

全屏区块高度不占满视口的常见原因包括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();
windo
w.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 是否意外裁剪了内容。