用 vh 读懂屏幕，做出自适应又不踩坑的高度布局

在手机与桌面混合办公的日常里，页面高度的适配总让人反复调试。用 vh 进行视口高度适配，既能做出干净利落的布局，也能在不同设备上保持一致的体验。下面用一个实际场景，把原理、方法和常见误区说清楚，尽量少走弯路。

从问题出发：为什么需要 vh 适配

想象一下，做一个固定高度的导航条：在手机上看着正常，在平板上显得偏低，桌面端又显得拥挤。这是因为不同设备的屏幕高度差异大，而像素单位（px）难以自动缩放。vh 单位把一视口的高度（1vh = 1% 的视口高度）直接映射到布局，能更自然地跟随设备高度变化。

基础概念与单位换算

• 1vh = 1% 的视口高度
• 100vh 等于视口的全部高度（从顶端到低端的总高度）
• 100vh 与 100% 的区别：100% 会受包含块高度影响，而 100vh 始终等于浏览器视口的高度

核心方法：用 vh 做出可预测的布局

1) 全屏高度的容器

.container {
  height: 100vh;
}

这个容器会从顶端到底端，适配当前视口高度。在响应式布局中，可以结合比例：

.section {
  height: 60vh;
}

2) 顶部留白与底部填充

.header {
  height: 10vh;
}
.navbar {
  height: calc(100vh - 20vh);
}

用 vh 拆分布局，既清晰又便于调整比例，比用固定像素更灵活。

3) 嵌套与滚动结合

当内容超出视口高度时，用 vh 控制高度与滚动区域：

.content {
  height: 80vh;
  overflow-y: auto;
}

这样在不同设备上，内容区域的高度都保持相对一致，滚动条的体验也更可预期。

常见误区与规避

• 误区一：把 vh 与百分比混用导致塌陷

  百分比会受包含块高度影响，和 100vh 相比，可能会出现预期之外的缩放。遇到不确定的包含块时，优先用 vh 绝对值，或用视口宽度的百分比配合 vh。

• 误区二：只用 vh 导致内容在移动端过小

  vh 的绝对缩放在移动端容易让字体和控件变小。可以在全局使用 rem 或 vw 来调节字体大小的基准，再叠加 vh 的具体高度，形成“基准+比例”的双层控制。

• 误区三：忽视滚动与内边距

  内边距和边框会影响高度计算。用 vh 时，尽量在父容器上减少内边距或用 padding-shrink 来调整，保证高度计算更直观。

实战小技巧：从视口高度到设备高度

不同设备的屏幕比例不同，单纯用 vh 有时会感觉不够“贴地”。可以用媒体查询结合设备像素比与方向，微调高度比例：

@media (orientation: landscape) {
  .content {
    height: 75vh;
  }
}
@media (min-device-pixel-ratio: 2) {
  .content {
    height: 85vh;
  }
}

但要记住，这类调整以小步快跑的方式进行，避免一次改动过大，影响布局稳定性。

结尾：让 vh 成为你的布局助手

掌握 vh 并不意味着你只需用它完成一切布局，但它是快速获得一致高度的关键工具。通过 vh 与 rem/px 的配合、以及对滚动与内边距的考虑，你可以做出在不同设备上都让人舒服的高度布局。把关键尺寸用 vh 表示，不仅能提升可维护性，也能让调试更直观、更快。