在移动端使用 100vh 时,可能会导致页面出现滚动条,这是由于移动设备的浏览器地址栏和工具栏的动态显示和隐藏引起的。不同的浏览器在计算视口高度时的行为可能不一致,尤其是在滚动时,地址栏的显示和隐藏会改变视口高度。
为了解决这个问题,我们可以使用一种更可靠的方法来计算视口高度,而不是依赖于 100vh。一种常见的解决方案是使用 JavaScript 动态计算视口高度,并将其设置为 CSS 变量,然后在 CSS 中使用这个变量。
下面是一个详细的解决方案和代码示例:
步骤 1:动态计算视口高度并设置 CSS 变量
首先,我们需要使用 JavaScript 动态计算视口高度,并将其设置为一个 CSS 变量。我们可以在页面加载时和窗口大小改变时进行计算。
<!DOCTYPE html>
Hello, World!