CSS 如何设置 div 的高度与其相邻元素相同

在本文中，我们将介绍如何使用 CSS 设置 div 元素的高度与其相邻元素相同。这在网页设计中非常常见，尤其是当我们想要创建一个网格布局，使得相邻的 div 模块高度保持一致时。

阅读更多：CSS 教程

使用 Flexbox 实现相邻元素高度一致

Flexbox 是 CSS 中非常强大的布局模型，它提供了一种简单的方法来实现相邻元素高度一致。以下是一些示例代码：

.container {
  display: flex;
}

.item {
  flex: 1;
}

在上面的代码中，我们使用了 display: flex; 属性将父容器 .container 设置为 Flexbox 布局。然后，我们使用 flex: 1; 属性将子元素 .item 设置为弹性项，并使其平分剩余空间。这样，相邻的 div 元素将自动具有相同的高度。

以下是一个完整的示例，演示了如何使用 Flexbox 实现相邻元素高度一致：

<div class="container">
  <div class="item">这是第一个 div 元素</div>
  <div class="item">这是第二个 div 元素</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: #f2f2f2;
  padding: 10px;
}

在上面的示例中，我们创建了一个包含两个 div 元素的父容器，并将这两个元素设置为弹性项。它们的高度会自动保持一致，并且有相同的背景颜色和内边距。

使用表格布局实现相邻元素高度一致

除了使用 Flexbox，我们还可以使用 CSS 表格布局来实现相邻元素高度一致。以下是示例代码：

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.item {
  display: table-cell;
}

在上面的代码中，我们使用 display: table; 属性将父容器 .container 设置为表格布局，并使用 table-layout: fixed; 属性来固定表格的布局。然后，我们使用 display: table-cell; 属性将子元素 .item 设置为表格的单元格。这样，相邻的 div 元素将具有相同的高度。

以下是一个完整的示例，演示了如何使用表格布局实现相邻元素高度一致：

<div class="container">
  <div class="item">这是第一个 div 元素</div>
  <div class="item">这是第二个 div 元素</div>
</div>

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.item {
  display: table-cell;
  background-color: #f2f2f2;
  padding: 10px;
}

在上面的示例中，我们创建了一个包含两个 div 元素的父容器，并将这两个元素设置为表格的单元格。它们的高度会自动保持一致，并且有相同的背景颜色和内边距。

使用 JavaScript 动态设置相邻元素高度一致

除了使用 CSS，我们还可以使用 JavaScript 在运行时动态设置相邻元素的高度保持一致。以下是示例代码：

<div class="container">
  <div class="item">这是第一个 div 元素</div>
  <div class="item">这是第二个 div 元素</div>
</div>

<script>
  window.addEventListener("resize", function() {
    var items = document.querySelectorAll(".item");
    var maxHeight = 0;

    items.forEach(function(item) {
      item.style.height = "auto";

      if (item.offsetHeight > maxHeight) {
        maxHeight = item.offsetHeight;
      }
    });

    items.forEach(function(item) {
      item.style.height = maxHeight + "px";
    });
  });

  window.dispatchEvent(new Event("resize"));
</script>

在上面的示例中，我们使用了 JavaScript 监听窗口的 resize 事件，并在每次窗口大小改变时重新计算并设置相邻元素的高度。通过遍历所有的 div 元素，并找到最大的高度值，然后将所有元素的高度都设置为该值，从而保持它们的高度一致。

请注意，使用 JavaScript 动态设置相邻元素高度一致可能会带来一些性能开销，并且在某些情况下可能会有一些闪烁效果。因此，我们推荐在可能的情况下尽量使用 CSS 实现相邻元素的高度一致。