100vh究竟意味着什么？探索其背后的奥秘！

深入探讨CSS中的100vh

在Web开发中，实现全屏布局或特定元素高度与视口高度一致是一个常见需求，CSS中的100vh单位为此提供了一种简洁而强大的解决方案，本文将详细解析100vh的含义、用法、注意事项以及与其他高度设置方式的区别，并通过示例和问答形式加深理解。

一、什么是100vh？

100vh是CSS中的一个长度值，其中vh是“视口高度”（Viewport Height）的缩写，1vh等于视口高度的1%，因此100vh就表示视口高度的100%，即整个视口的高度，这种相对单位使得布局能够根据浏览器窗口的大小动态调整，非常适合创建响应式设计。

二、为什么使用100vh？

使用100vh的主要目的是为了让元素的高度与视口高度完全匹配，从而实现全屏显示的效果，这在多种场景下都非常有用，

全屏背景：创建一个覆盖整个屏幕的背景图像或颜色。

全屏幻灯片：制作一个全屏的轮播图或幻灯片展示。

登录页面：设计一个占满整个屏幕的登录表单或欢迎界面。

仪表盘界面：构建数据可视化仪表盘，确保所有图表和组件充分利用屏幕空间。

三、如何使用100vh？

使用100vh非常简单，只需要在CSS中将元素的高度设置为100vh即可，要创建一个全屏的div容器，可以编写以下CSS代码：

.fullscreen-div {
    height: 100vh;
}

这样，.fullscreen-div类的元素就会占据整个浏览器窗口的高度，如果还需要该元素宽度也铺满整个屏幕，可以添加width: 100vw;（视口宽度的100%）和margin: 0;（去除默认的外边距）样式：

.fullscreen-div {
    height: 100vh;
    width: 100vw;
    margin: 0;
}

四、注意事项

尽管100vh非常强大，但在使用过程中需要注意以下几点：

1. 滚动条的影响

当视口高度小于元素设置的100vh时（由于内容过多导致垂直滚动），会出现滚动条，为了避免这种情况影响布局，可以考虑设置父容器的overflow属性为hidden：

.parent-container {
    overflow: hidden;
}

2. 移动端适应性

在移动端设备上，浏览器的地址栏和底部导航栏可能会收起或弹出，从而改变视口高度，这可能导致使用100vh的元素呈现不符合预期的效果，为了解决这个问题，可以使用JavaScript监听视口大小的变化，并根据需要调整元素的高度。

3. 兼容性问题

虽然vh单位在大多数现代浏览器中得到很好的支持，但在某些旧版本的浏览器中可能存在问题，在使用100vh时，建议进行兼容性测试，并根据需要提供备用方案。

五、与其他高度设置方式的区别

1.height: 100% vsheight: 100vh

height: 100%表示元素的高度将与其父元素的高度相同，要使height: 100%生效，父元素必须具有明确定义的高度（如固定高度值或相对定位），相比之下，height: 100vh直接以视口高度为基准，无需考虑父元素的高度，当元素没有内容时，设置height: 100%的元素不会被撑开，而设置height: 100vh的元素会被撑开以匹配视口高度。

2. 使用场景对比

百分比高度（%）：适用于需要根据父元素高度来设置自身高度的场景，如嵌套布局中的子元素。

视口单位（vh）：适用于需要根据浏览器窗口大小来设置高度的场景，如全屏布局或响应式设计。

六、示例

示例一：全屏幻灯片

HTML结构：

<div class="fullscreen-slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
</div>

CSS样式：

.fullscreen-slider {
    height: 100vh;
    display: flex;
    flex-direction: column; /* 垂直排列幻灯片 */
}
.slide {
    flex: 1; /* 均分高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 1px solid #ccc; /* 仅为了示例，区分幻灯片边界 */
}

在这个例子中，我们创建了一个全屏的幻灯片容器，并通过Flexbox布局将每个幻灯片垂直排列，占据剩余的空间，每个幻灯片的内容都被垂直和水平居中。

示例二：全屏登录窗口

HTML结构：

<div class="fullscreen-login">
    <div class="login-box">
        <h2>Login</h2>
        <form>
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
            <button type="submit">Login</button>
        </form>
    </div>
</div>

CSS样式：

.fullscreen-login {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* 仅为了示例，设置背景色 */
}
.login-box {
    width: 300px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
input[type="text"], input[type="password"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
}
button {
    padding: 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

在这个例子中，我们创建了一个全屏的登录窗口，并通过Flexbox布局将登录框垂直和水平居中于视口中央，登录框内部包含了一个简单的登录表单，包括用户名输入框、密码输入框和登录按钮。

七、相关问答FAQs

Q1: 为什么有时候使用100vh会导致页面滚动？

A1: 当视口高度小于元素设置的100vh时（由于内容过多导致垂直滚动），会出现滚动条，为了避免这种情况影响布局，可以考虑设置父容器的overflow属性为hidden，或者调整元素的内部内容以避免溢出，也要确保没有其他CSS规则或脚本影响了视口大小或元素高度。

Q2: 如何在移动端设备上确保使用100vh的元素呈现正常？

A2: 在移动端设备上，由于浏览器的地址栏和底部导航栏可能会收起或弹出，从而改变视口高度，导致使用100vh的元素呈现不符合预期的效果，为了解决这个问题，可以使用JavaScript监听视口大小的变化（如resize事件），并根据需要调整元素的高度，也可以考虑使用CSS媒体查询针对移动端设备进行特定的样式调整，一些现代浏览器和框架提供了针对移动端的优化工具和插件，可以帮助开发者更好地控制视口高度和布局。