CSS 100vh

在 Web 开发中，我们经常会遇到需要设置元素的高度与视口高度相同的情况。而在 CSS 中，我们可以使用 vh 单位来实现。本文将详细讨论 100vh 的用法及相关注意事项。

什么是 vh？

vh 是 CSS 中相对长度单位之一，表示视口高度的百分比。1vh 等于视口高度的 1%，即视口高度的 0.01。

视口（viewport）是指浏览器中用来显示网页内容的区域，它的高度会随着浏览器窗口的高度改变而改变。

为什么要使用 100vh？

在一些网站或应用中，我们希望某个元素的高度与视口高度完全匹配，以达到全屏显示的效果。比如，一个全屏轮播图、一个占满整个屏幕的登录窗口等。这时候，就可以使用 100vh 来实现。

用法示例

示例1：全屏幻灯片

首先，让我们看一个使用 100vh 来创建全屏幻灯片的示例。下面是一个简单的 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;
  overflow: hidden;
}

.slide {
  width: 100vw;
  height: 100vh;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

在这个例子中，我们将全屏幻灯片容器的高度设置为 100vh，以让它与视口高度一致。每个幻灯片的宽度也设置为 100vw，以让它们占据整个视口的宽度。align-items: center 和 justify-content: center 属性用于将幻灯片内容居中显示。

示例2：全屏登录窗口

现在，让我们看一个使用 100vh 创建全屏登录窗口的示例。下面是一个简单的 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;
}

.login-box {
  width: 300px;
  padding: 20px;
  background: #f1f1f1;
  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;
}

在这个例子中，父容器 fullscreen-login 的高度设置为 100vh，以让登录窗口占据整个视口的高度。设置 display: flex 和 justify-content: center、align-items: center 属性使得登录窗口垂直居中于视口。login-box 类定义了登录窗口的样式，form 元素及其内部的输入框和按钮通过 CSS 设置了样式。

注意事项

使用 100vh 需要注意一些问题：

滚动条的出现：当视口高度小于元素设置的 100vh 时，会出现滚动条。为了避免这种情况，可以考虑设置父容器的 overflow 属性为 hidden。
移动端适应性：在移动端设备上，浏览器的地址栏和底部导航栏可能会收起或弹出，从而改变视口高度。这可能导致使用 100vh 的元素呈现不符合预期的效果。为了解决这个问题，可以考虑使用 JavaScript 监听视口大小的变化，并根据需要调整元素的高度。
浏览器兼容性：vh 单位在大多数现代浏览器中得到很好的支持，但在某些旧版本的浏览器中可能存在问题。在使用 100vh 时，建议进行兼容性测试，并根据需要提供备用方案。

总结

本文详细讨论了 CSS 中的 100vh 的用法及相关注意事项。 100vh 单位非常有用，可以轻松实现元素与视口高度相匹配的效果，适用于各种全屏显示的场景。然而，在使用 100vh 时需要注意滚动条出现、移动端适应性和浏览器兼容性等问题。通过合理地使用 100vh，我们可以为用户提供更好的浏览体验，并创建出吸引人的全屏界面。