在移动端使用 100vh 时，可能会导致页面出现滚动条，这是由于移动设备的浏览器地址栏和工具栏的动态显示和隐藏引起的。不同的浏览器在计算视口高度时的行为可能不一致，尤其是在滚动时，地址栏的显示和隐藏会改变视口高度。
为了解决这个问题，我们可以使用一种更可靠的方法来计算视口高度，而不是依赖于 100vh。一种常见的解决方案是使用 JavaScript 动态计算视口高度，并将其设置为 CSS 变量，然后在 CSS 中使用这个变量。
下面是一个详细的解决方案和代码示例：
步骤 1：动态计算视口高度并设置 CSS 变量
首先，我们需要使用 JavaScript 动态计算视口高度，并将其设置为一个 CSS 变量。我们可以在页面加载时和窗口大小改变时进行计算。
html 代码解读复制代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Viewport Height</title>
<style>
:root {
--vh: 100%;
}
.full-height {
height: calc(var(--vh, 1vh) * 100);
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>Hello, World!</h1>
</div>
<script>
function setVh() {
// Calculate 1vh in pixels
const vh = window.innerHeight * 0.01;
// Set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// Set the initial value
setVh();
// Recalculate on window resize
window.addEventListener('resize', setVh);
</script>
</body>
</html>
-
HTML 结构：我们创建了一个简单的 HTML 页面，其中包含一个
div元素，该元素的高度设置为动态计算的视口高度。 -
CSS 样式：
- 我们在
:root中定义了一个 CSS 变量--vh，初始值为100%。 - 在
.full-height类中，我们使用calc(var(--vh, 1vh) * 100)来设置高度，这样可以确保高度是动态计算的视口高度。
- 我们在
-
JavaScript 代码：
setVh函数用于计算视口高度，并将其设置为 CSS 变量--vh。window.innerHeight * 0.01计算出1vh的像素值。document.documentElement.style.setProperty('--vh',${vh}px)将计算出的值设置为--vh变量。- 页面加载时调用
setVh函数，确保初始值正确。 - 监听
resize事件，在窗口大小改变时重新计算视口高度。
通过这种方法，我们可以确保在移动端使用 100vh 时，视口高度计算是准确的，不会因为浏览器地址栏和工具栏的动态显示和隐藏而导致页面出现滚动条。这个解决方案不仅适用于移动端，也可以在桌面端使用，以确保一致的视口高度计算。
github.com
