Android浏览器中100vh未适配工具栏，如何获取真实可用高度？

桌面端用100vh可以让元素完美占满可视窗口，溢出内容也能正常滚动，但在Android端（比如Mozilla Focus 117.0），100vh不会考虑浏览器工具栏的高度，导致页面底部内容被遮挡，尤其是浏览器滚动隐藏工具栏时，这个问题更突出。下面提供几种不需要修改浏览器设置的解决方案：

方案1：使用CSS动态视口单位dvh #

这是目前最简洁的解决方案，dvh（Dynamic Viewport Height）会自动根据浏览器工具栏的显示/隐藏状态，计算当前真实的可视区域高度，直接替代100vh即可：

.content {
  height: 100dvh;
}

主流移动端浏览器（包括Chrome、Firefox Focus）都已支持这个单位，无需额外代码。

方案2：JavaScript实时监听可视高度（兼容旧浏览器） #

如果需要兼容不支持dvh的旧浏览器，可以通过JS获取当前真实可视高度，实时更新元素高度：
首先保留100vh作为降级方案：

.content {
  height: 100vh;
}

然后添加JS代码：

// 设置内容区域高度为当前可视高度
function updateContentHeight() {
  const contentEl = document.querySelector('.content');
  contentEl.style.height = `${window.innerHeight}px`;
}

// 初始化执行
updateContentHeight();
// 监听窗口大小变化、屏幕旋转事件（适配工具栏显示/隐藏）
window.addEventListener('resize', updateContentHeight);
window.addEventListener('orientationchange', updateContentHeight);

window.innerHeight会返回当前浏览器排除工具栏后的真实可视高度，能准确适配不同状态。

方案3：Flex自适应布局（更健壮的布局思路） #

放弃固定视口高度，改用Flex布局让内容自动填充剩余空间，从根源避免视口单位的问题：
修改全局和内容区域的CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center; /* 对应原布局的mx-auto */
}
.content {
  width: 100%;
  max-width: 768px; /* 对应col-lg-6的最大宽度 */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

原布局中flex-grow-1的内容区域会自动填充剩余空间，不管浏览器工具栏如何变化，整个布局都会自适应真实可用高度，不会出现内容被遮挡的情况。

内容的提问来源于stack exchange，提问作者Mark