100vh是什么意思？它有何用途？

100vh 在网页设计中的应用与解析

在现代网页设计中，100vh是一个经常被提及的CSS单位，它代表视口高度（Viewport Height）的100%，即浏览器窗口的可视区域的高度，这个单位对于创建响应式、全屏布局以及实现特定视觉效果非常有用，本文将深入探讨100vh的概念、应用场景、注意事项以及常见问题解答。

`100vh`的基本概念

100vh是CSS中的一个相对长度单位，用于定义元素的高度为当前视口高度的100%，与像素（px）、百分比（%）等单位不同，vh（视口高度单位）和vw（视口宽度单位）是基于浏览器窗口的大小来计算的，这使得它们非常适合用于响应式设计，能够确保元素在不同设备和屏幕尺寸上保持适当的比例和位置。

应用场景

全屏背景

一个常见的应用场景是为网页设置全屏背景图像或颜色，使用100vh可以确保背景覆盖整个浏览器窗口的可视区域，无论窗口大小如何变化。

body, html {
    height: 100%; /* 确保HTML和BODY元素占据整个浏览器窗口 */
    margin: 0; /* 移除默认的外边距 */
}
.fullscreen-bg {
    background: url('path/to/image.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh; /* 设置背景高度为视口高度的100% */
}

固定定位的元素

当需要将某个元素固定在浏览器窗口的特定位置时，如顶部导航栏、侧边栏或底部版权信息栏，100vh同样适用，创建一个固定在页面右侧且高度与视口等高的侧边栏：

.sidebar {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh; /* 侧边栏高度与视口等高 */
    width: 250px;
    background-color: #333;
    color: white;
    padding: 20px;
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度不超过250px */
}

区域

在某些布局中，可能需要根据视口高度动态调整内容区域的大小，以保持整体布局的协调性，在一个包含顶部导航、主要内容区和底部页脚的布局中，可以使用calc(100vh 导航高度 页脚高度)来设置主要内容区的高度，确保其在垂直方向上填满剩余空间。

.content {
    height: calc(100vh 60px 40px); /* 假设导航高度为60px，页脚高度为40px */
}

注意事项

1、浏览器兼容性：虽然大多数现代浏览器都支持vh和vw单位，但在一些老旧的浏览器中可能不受支持，在使用这些单位时，需要考虑目标用户的浏览器版本。

2、滚动条影响：当页面内容超出视口高度并出现滚动条时，100vh仍然基于视口的初始高度计算，不包括滚动条的宽度（如果有的话），这可能导致在某些情况下布局出现偏差。

3、与其他单位的混用：在复杂的布局中，可能需要将vh与其他CSS单位（如px、em、rem等）结合使用，这时，需要注意单位的转换和计算，以确保布局的准确性和一致性。

FAQs

Q1: 为什么有时候使用100vh设置的背景没有完全覆盖整个浏览器窗口？

A1: 这种情况通常是由于页面上存在滚动条导致的，当页面内容超出视口高度并出现垂直滚动条时，100vh是基于视口的初始高度（不包括滚动条）计算的，因此背景可能无法完全覆盖到滚动条下方的区域，为了解决这个问题，可以尝试使用100svh（安全视口高度），它在计算时会考虑滚动条的宽度。

Q2: 如何在不使用vh的情况下实现类似的全屏效果？

A2: 如果不想使用vh单位，可以考虑使用JavaScript动态获取浏览器窗口的高度，并将其应用到相应的元素上，通过监听窗口的resize事件，可以确保在窗口大小发生变化时，元素的高度也会相应地更新，这种方法虽然不如直接使用vh单位简洁，但可以实现更精确的控制。