移动端position:absolute与fixed差异：为何absolute出现滚动？

核心问题：移动端浏览器视口高度的计算差异 #

你遇到的现象是因为Chrome、Safari和Firefox对100vh的解析逻辑不同，再结合position:absolute和position:fixed的定位规则导致的：

• Chrome/Safari的100vh计算逻辑：
  这两个浏览器的100vh是基于布局视口计算的，包含了浏览器的地址栏、底部导航栏这些动态显示的UI元素。当你滚动页面时，这些UI元素会隐藏，此时视觉视口（用户实际看到的屏幕区域）会变大，但父元素的height:100vh是固定的初始布局视口高度，比当前视觉视口要高。而position:absolute的子元素是相对于父元素定位，父元素高度超出视觉视口，就会触发页面垂直滚动。

• position:fixed的特殊表现：
  fixed定位是相对于视觉视口的，不管浏览器动态UI怎么变化，它始终贴合当前用户可见的视口边缘，不会超出视觉视口范围，所以不会触发滚动。

• Firefox的不同处理：
  Firefox移动端的100vh是基于视觉视口动态计算的，会随着浏览器UI的显示/隐藏自动调整高度，让父元素始终和当前视觉视口高度一致，因此absolute子元素不会超出视口，也就没有滚动问题。

解决方法 #

可以使用CSS的动态视口单位dvh代替vh，它会实时匹配当前视觉视口的高度，避免布局视口和视觉视口的差异：

.parent {
  height: 100dvh; /* 替换100vh */
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  color: black;
}

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