CSS body的min-height在vh和%之间的比较

在本文中，我们将介绍CSS的两种长度单位vh和%，并探讨在设置body元素的min-height属性时，使用哪种单位更为合适。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是vh单位？

vh是CSS3引入的一种相对单位，表示视区高度的1/100。例如，100vh等于视区高度。
如下面的代码所示，我们将视区高度设置为100vh，并给其设置一个背景颜色，以便更好地演示vh单位的作用：

div {
  height: 100vh;
  background-color: #f2f2f2;
}

在这个例子中，div元素将占据整个视区的高度。

什么是%单位？

%是CSS中最常见的相对单位之一，用于相对于父元素的长度。例如，如果父元素的高度为200px，子元素的高度设置为50%，则子元素的高度将为100px。
以下是一个示例代码，我们将一个固定高度的父元素创建为200px，并使其包含一个高度为50%的子元素：

div {
  height: 200px;
  background-color: #f2f2f2;
}

child-div {
  height: 50%;
  background-color: #ccc;
}

在这个例子中，子元素的高度为父元素高度的50%。

使用vh或%为body元素设置min-height？

现在，让我们来讨论在设置body元素的min-height属性时，应该使用vh还是%的单位。

使用vh单位

使用vh单位来设置body元素的min-height可以确保其高度与视区高度保持一致，即使在调整窗口大小的情况下也是如此。
例如，我们设置body元素的min-height为100vh：

body {
  min-height: 100vh;
}

无论视区的高度是多少，body元素都将具有与视区相同的高度。

使用%单位

使用%单位来设置body元素的min-height意味着它将相对于其包含块或父元素来计算高度。
例如，我们将body元素的min-height设置为100%，则其高度将等于其包含块的高度。

body {
  min-height: 100%;
}

在这个例子中，body元素的高度将与其包含块的高度相同。

示例对比

让我们通过一个实际示例来比较使用vh和%单位为body元素设置min-height的效果。
我们创建一个包含一个header和一个content的简单布局，并分别使用vh和%单位来设置body元素的min-height。

使用vh单位的示例：

<body>
  <header>Header</header>
  <content>Content</content>
</body>

<style>
  body {
    min-height: 100vh;
  }
  header {
    height: 50px;
    background-color: #ccc;
  }
  content {
    height: calc(100vh - 50px);
    background-color: #f2f2f2;
  }
</style>

使用%单位的示例：

<body>
  <header>Header</header>
  <content>Content</content>
</body>

<style>
  body {
    min-height: 100%;
  }
  header {
    height: 50px;
    background-color: #ccc;
  }
  content {
    height: calc(100% - 50px);
    background-color: #f2f2f2;
  }
</style>

在上述两个示例中，我们在body元素内部创建了一个固定高度的header，剩余部分用于content。通过调整窗口大小，您可以看到使用vh单位时，content元素的高度保持与视区相同，而使用%单位时，content元素的高度会随着其包含块的大小而发生变化。