CSS 如何设置一个有响应式高度的 div

在本文中，我们将介绍如何使用 CSS 来设置一个具有响应式高度的 div。响应式设计在现代网页开发中非常重要，可以确保网页在不同设备上具有良好的可视性和用户体验。

阅读更多：CSS 教程

使用百分比高度

使用百分比高度是一种常见的方法来实现响应式高度的 div。通过将 div 的高度设置为相对于其父元素的百分比，可以实现根据父元素高度自动调整 div 的高度。

例如，我们有一个容器 div，其高度为 300px。我们希望内部的 div 元素高度始终为容器高度的一半。我们可以使用如下的 CSS 代码来实现：

.container {
  height: 300px;
}

.inner-div {
  height: 50%;
}

在上述示例中，我们将容器 div 的高度设置为 300px，然后将内部的 div 的高度设置为 50%。这样，无论容器 div 的高度如何变化，内部的 div 都会相应地调整其高度以保持响应式。

使用视口单位

另一种常用的方法是使用视口单位来设置响应式高度。视口单位是根据浏览器窗口的大小来计算的，因此可以确保在不同设备上具有一致的效果。

以下是一些常用的视口单位：

vw：相对于视口宽度的百分比。
vh：相对于视口高度的百分比。

例如，我们希望一个 div 的高度始终保持屏幕高度的 80%。我们可以使用以下 CSS 代码来实现：

.div-responsive {
  height: 80vh;
}

在上述示例中，我们使用 vh 单位将 div 的高度设置为视口高度的 80%。这样，无论屏幕的大小如何变化，div 都将自动调整其高度以保持响应式。

使用媒体查询

媒体查询是一种用于根据不同的设备特性应用不同样式的 CSS 技术。通过在 CSS 中使用媒体查询，我们可以根据屏幕尺寸或设备方向来调整 div 的高度。

以下是一个示例，当屏幕宽度小于 768px 时，我们将 div 的高度设置为 200px，否则设置为 400px：

.div-responsive {
  height: 400px;
}

@media screen and (max-width: 768px) {
  .div-responsive {
    height: 200px;
  }
}

在上述示例中，我们首先将 div 的默认高度设置为 400px。然后，在媒体查询中，我们使用 @media 关键字指定了一个条件，即屏幕宽度小于 768px。当满足该条件时，嵌套在媒体查询中的样式将覆盖默认样式，将 div 的高度设置为 200px。

使用媒体查询可以根据不同设备的特性来设置不同的高度，从而实现响应式的效果。

使用 JavaScript 动态计算高度

在某些情况下，CSS 无法满足我们的需求，我们可以使用 JavaScript 动态计算 div 的高度。

例如，我们需要将一个 div 的高度设置为其宽度的一半。使用 CSS 无法直接实现这个效果，但是我们可以通过 JavaScript 来实现：

<div id="div-with-responsive-height"></div>

<script>
  const div = document.getElementById("div-with-responsive-height");
  const width = parseInt(window.getComputedStyle(div).getPropertyValue("width"));
  const height = width / 2;
  div.style.height = height + "px";
</script>

在上述示例中，我们首先获取了 div 的宽度，并通过 JavaScript 计算出高度。然后，将计算得到的高度应用于 div 元素。

通过使用 JavaScript 动态计算高度，我们可以根据不同的计算逻辑实现复杂的响应式高度效果。