CSS 能否根据百分比宽度设置一个 div 的高度

在本文中，我们将介绍如何使用 CSS 根据百分比宽度来设置一个 div 元素的高度。CSS 是一种用于样式化网页元素的语言，我们可以使用它来改变元素的外观和布局。

阅读更多：CSS 教程

CSS 盒模型

在我们开始之前，让我们先简要了解一下 CSS 盒模型。每个 HTML 元素都被认为是一个矩形盒子，这个盒子由内容、内边距、边框和外边距组成。CSS 盒模型中的宽度和高度属性通常指的是这个盒子的内容区域的尺寸。

CSS 提供了百分比单位来设置宽度和高度。对于宽度来说，当我们将一个 div 元素的宽度设置为百分比时，这个百分比是相对于父元素的宽度。例如，如果一个 div 的宽度设置为 50%，那么它将占据父元素宽度的一半。

然而，对于高度来说，情况有所不同。当我们将一个 div 的高度设置为百分比时，这个百分比是相对于包含块的高度。包含块可以是父元素、祖先元素或者根元素（html 或 body）。

要根据百分比宽度设置一个 div 的高度，我们可以利用 CSS 的 calc() 函数。calc() 函数允许我们执行基本的四则运算，可以在其中使用百分比单位。

下面是一个示例，展示了如何根据百分比宽度设置一个 div 的高度：

.container {
  width: 50%;
  height: calc(100% / 2);
}

在上面的示例中，我们创建了一个名为 .container 的 div 元素，并将其宽度设置为父元素宽度的一半（50%）。然后，我们使用 calc() 函数将其高度设置为父元素高度的一半（100% / 2）。

这样，无论父元素的高度如何变化，div 元素的高度都会自动根据百分比宽度进行调整。

除了使用包含块的百分比单位，CSS 还提供了一种特殊的百分比单位，即基于视口的百分比单位。这些单位是相对于浏览器视口的尺寸而不是元素的包含块。

常见的基于视口的百分比单位有 vw 和 vh。vw 表示视口宽度的百分比，而 vh 表示视口高度的百分比。例如，1vw 等于视口宽度的 1%。

使用这些单位，我们可以根据视口的尺寸来设置元素的宽度和高度，而不需要依赖于父元素或包含块。

下面是一个示例，展示了如何使用基于视口的百分比单位来设置一个 div 的宽度和高度：

.container {
  width: 50vw;
  height: 50vh;
}

在上面的示例中，我们将 .container 的宽度设置为视口宽度的一半（50vw），将其高度设置为视口高度的一半（50vh）。

在本文中，我们介绍了如何使用 CSS 根据百分比宽度来设置一个 div 的高度。我们了解到，对于宽度来说，百分比是相对于父元素的宽度的，但是对于高度来说，百分比是相对于包含块的高度的。我们还学习了如何使用 calc() 函数和基于视口的百分比单位来实现这一效果。

当我们需要根据页面布局来动态调整元素的高度时，这些技术将会非常有用。无论是创建响应式设计还是实现一些特定的交互效果，我们都可以利用这些技术来确保元素的高度始终符合我们的需求。