100vh不会使柱子高度达到100%

基础概念

vh 是一个相对单位，表示视口高度的百分比。100vh 意味着元素的高度等于视口高度的100%。然而，在某些情况下，100vh 并不会使柱子高度达到100%。

原因

1. 浏览器工具栏和地址栏：现代浏览器通常有可调整大小的工具栏和地址栏，这些元素会占用视口的一部分高度，导致实际可用的视口高度小于100%。
2. 滚动条：如果页面有滚动条，滚动条也会占用一部分视口高度。
3. 其他UI元素：页面上的其他固定或绝对定位的UI元素可能会覆盖或影响100vh的计算。

解决方法

1. 使用 calc() 函数

通过 calc() 函数减去浏览器工具栏和地址栏的高度，可以更准确地设置元素高度。

.bar {
  height: calc(100vh - 50px); /* 假设工具栏和地址栏高度为50px */
}

2. 使用 env() 和 constant() 函数（适用于Safari）

Safari浏览器提供了 env() 和 constant() 函数来处理安全区域。

.bar {
  height: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 100vh);
}

3. 使用 JavaScript 动态计算高度

通过JavaScript动态获取视口高度，并减去其他UI元素的高度。

const bar = document.querySelector('.bar');
const viewportHeight = window.innerHeight;
const toolbarHeight = 50; // 假设工具栏高度为50px
bar.style.height = (viewportHeight - toolbarHeight) + 'px';

应用场景

100vh 通常用于创建全屏高度的元素，如全屏背景、导航栏、侧边栏等。通过上述方法，可以确保这些元素在不同浏览器和设备上都能正确显示。

参考链接

• MDN Web Docs - Viewport units
• CSS-Tricks - 100vh on Mobile Devices

希望这些信息对你有所帮助！