1. 视口单位与高度策略
核心概念
视口高度单位是前端布局的关键，能够让元素高度随浏览器窗口的实际可视高度变化而调整。常见的单位有 vh 与新兴的 100dvh，它们在移动端和桌面端表现不同。
在实现 100%高度时，通常需要确保根元素的父级都具备确定的高度。一个常见的做法是让 html 和 body 高度设为 100% ，从而为子元素提供参照高度。
需要注意的是，100vh 可能在移动端出现滚动条隐藏时高度不一致的问题，此时可考虑采用 100dvh 或通过 JavaScript 动态计算的方案。
/* 经典做法：html 与 body 高度为 100% */
html, body {height: 100%;margin: 0;
}
#app {min-height: 100%;
}
2. 自适应布局结构设计
布局模型选择
要实现整页的视口自适应，Flexbox 和 Grid 是最常用的工具。以垂直方向为主的布局，可将页面主体设为容器并让内容区域 自动填充剩余空间。
一个典型的结构是：头部固定高度，主体区域使用 flex: 1 1 auto 去填充剩余高度，尾部固定或自适应。这样的设计能在浏览器高度变化时保持稳定的视觉体验。
下面的示例展示一个典型的竖直布局框架，结合 100% 高度 的父级引用，确保全屏覆盖。
/* 竖直布局示例 */
html, body {height: 100%;
}
.app {min-height: 100%;display: flex;flex-direction: column;
}
.header {height: 60px;flex: 0 0 auto;
}
.main {flex: 1 1 auto;
}
.footer {height: 40px;flex: 0 0 auto;
}
3. 移动端视口变化与防抖处理
处理地址栏与动态高度
移动端的地址栏在滚动时会出现隐藏与显示，导致可视区域高度动态变化。为实现稳定的全屏效果，可以通过 CSS 100dvh 或使用一个 JavaScript 辅助变量来跟踪真实高度。
一种常见做法是在页面加载与屏幕旋转时，计算有效高度并注入到 CSS：通过将 CSS 变量设置为 window.innerHeight 的 1% 值，然后在布局中以 calc(var(--vh) * 100) 表示整页高度。
为确保在各浏览器中有一致表现，可以同时结合 100vh 与 100dvh 的回退逻辑，以及对 safe-area-inset 的处理，尤其在 iPhone X 及以上设备。下面给出一个简化实现。
// JavaScript: 动态设置 --vh，以便反映真实视口高度
function setVh() {const vh = window.innerHeight * 0.01;document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setVh();
window.addEventListener('resize', setVh);
/* CSS 使用动态变量实现全屏高度 */
.fullscreen {height: calc(var(--vh, 1vh) * 100);/* 兼容 100vh 的回退值 */height: calc(100vh);padding-bottom: env(safe-area-inset-bottom);
}
4. 实战案例：一个全屏布局页面
案例要点
下面给出一个简化的全屏布局案例，演示如何结合 100% 高度 与 视口自适应 实现一个横竖屏都稳定的界面。注意文本与图片的比例、留白以及滚动行为的控制。
HTML 结构应简单清晰，包含头部、主体和脚部，主体区域使用 flex 布局确保占满剩余空间。
CSS 样式应包含根元素高度策略、主体的自适应伸缩以及移动端的 100dvh 替代实现。
头部导航 内容区域 /* 对应 CSS 结构的样式 */
:root { --vh: 1vh; }
html, body { height: 100%; margin: 0; }
.app { min-height: 100%; display: flex; flex-direction: column; }
.header { height: 60px; background: #1e90ff; color: #fff; }
.main { flex: 1 1 auto; background: #f5f5f5; }
.footer { height: 40px; background: #333; color: #fff; }
@media (min-width: 768px) {.main { padding: 20px; }
}
.fullscreen { height: calc(var(--vh, 1vh) * 100); padding-bottom: env(safe-area-inset-bottom); }
5. 性能与兼容性要点
浏览器兼容与回退
对于老版本浏览器，100%高度 与 视口自适应 的实现需要回退方案，例如将根元素高度设为 100%，并使用固定像素高度的容器作为替代。
现代浏览器普遍支持 100dvh 与 CSS 变量（custom properties），开发者应尽量使用 CSS 变量来对高度进行统一管理，减少页面抖动。
在实际上线前，请结合多个设备与浏览器进行测试，确保 移动端地址栏变动、滚动 以及 纵横屏切换 时的表现一致。
