移动端Navbar未固定在底部，滚动移位问题求助

核心原因 #

移动端浏览器的100vh是基于**浏览器总高度（包含地址栏/工具栏）**计算的，但实际可视区域会随地址栏收起/展开动态变化，导致依赖100vh布局的元素出现错位、底部间隙。桌面调试模式不会模拟地址栏的动态变化，因此表现正常。

解决方案1：使用动态视口单位（推荐，现代浏览器支持） #

直接用dvh（动态视口高度）替代100vh，它会自动适配当前实际可视区域高度：

/* 重置全局默认样式，避免默认边距干扰 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 页面容器使用动态视口高度 */
.page-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 底部Navbar固定定位 */
.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px; /* 自定义高度 */
  background: #fff;
  /* 其他样式：边框、内边距等 */
}

/* 给页面主体添加padding-bottom，避免内容被Navbar遮挡 */
.main-content {
  padding-bottom: 56px; /* 与Navbar高度一致 */
}

解决方案2：JavaScript动态计算视口高度（兼容旧浏览器） #

针对不支持dvh的旧浏览器，通过JS实时获取当前可视高度，自定义CSS变量实现适配：

1. 添加JS代码：

function updateViewportHeight() {
  const viewportHeight = window.innerHeight;
  document.documentElement.style.setProperty('--vh', `${viewportHeight}px`);
}

// 初始化执行
updateViewportHeight();
// 监听窗口大小变化和屏幕旋转
window.addEventListener('resize', updateViewportHeight);
window.addEventListener('orientationchange', updateViewportHeight);

2. 对应CSS：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.page-wrapper {
  min-height: var(--vh, 100vh);
  display: flex;
  flex-direction: column;
}

.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
}

.main-content {
  padding-bottom: 56px;
}

额外检查点 #

• 确保Navbar没有设置margin-bottom，父元素没有padding-bottom或overflow: hidden导致的布局偏移
• 部分浏览器可能存在滚动时的“弹跳”效果，可尝试给body添加overscroll-behavior: none抑制

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