CSS 在移动设备上，由于浏览器的 UI，100vh 太高了

在本文中，我们将介绍移动设备上使用 CSS 进行布局时，由于浏览器的 UI 导致的 100vh 高度过高的问题，并提供解决方案和示例说明。

阅读更多：CSS 教程

问题描述

移动设备上的浏览器通常会在屏幕上显示地址栏、导航栏等浏览器的用户界面元素。这些界面元素会占用屏幕的一部分空间，导致可视区域的高度减少。而在 CSS 中，vh（viewport height）单位表示相对于视口高度的百分比，即 1vh 等于视口高度的 1%。然而，由于浏览器的 UI 占据了一定高度，使用 100vh 在移动设备上可能会导致元素高度过高，超出了实际可视区域。

解决方案

为了兼容移动设备上的 UI，我们可以使用 calc() 函数结合视口单位来计算元素的高度。

.element {
  height: calc(100vh - 60px);
}

在上述示例中，我们将元素的高度设置为视口高度减去 60px（这里假设浏览器的 UI 占据了 60px 的高度）。通过这种方式，我们可以确保元素的高度适应实际的可视区域。

示例说明

为了更好地理解和验证解决方案的效果，让我们通过一个具体的示例来说明。

<!DOCTYPE html>
<html>
<head>
  <title>Mobile Viewport Height Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .header {
      height: 60px;
      background-color: #f2f2f2;
    }

    .content {
      height: calc(100vh - 60px);
      background-color: #e0e0e0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .text {
      font-size: 24px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="header">Header</div>
  <div class="content">
    <div class="text">Content</div>
  </div>
</body>
</html>

在上述示例中，我们创建了一个包含头部和内容的简单 HTML 页面，并使用 CSS 将头部高度设置为 60px，内容高度使用 calc() 函数设置为视口高度减去头部高度。内容部分居中显示了一个文本。

在移动设备上预览上述示例页面时，你会发现内容部分的高度确实适应了可视区域，滚动条出现在内容部分结束的位置，而不是整个页面结束的位置。