CSS 如何使用CSS或JavaScript使左侧div的高度与右侧div相同

在本文中，我们将介绍如何使用CSS或JavaScript在两栏页面上使左侧div的高度与右侧div相同。

阅读更多：CSS 教程

使用CSS方法

要实现左侧div高度与右侧div相同的效果，我们可以使用CSS的Flexbox布局。首先，确保将左侧和右侧的div包裹在容器中。

<div class="container">
  <div class="left-div">Left Div Content</div>
  <div class="right-div">Right Div Content</div>
</div>

接下来，我们将使用Flexbox属性来达到等高效果。在容器的CSS样式中，添加以下属性：

.container {
  display: flex;
}

以上代码将使容器成为Flex容器，并使它的子元素成为Flex项。接下来，我们可以使用Flex属性指定子元素的相对宽度和高度。

.left-div {
  flex: 1;
}
.right-div {
  flex: 1;
}

以上代码使左侧和右侧的div均分容器的可用空间，并实现高度相等的效果。这是因为左侧和右侧的div都具有相同的flex属性值。

使用JavaScript方法

除了使用CSS方法之外，我们还可以使用JavaScript来实现左侧div和右侧div的高度相等。以下是一种使用JavaScript的方法：

<div class="container">
  <div class="left-div" id="leftDiv">Left Div Content</div>
  <div class="right-div">Right Div Content</div>
</div>

首先，我们需要在左侧div上添加一个唯一的ID属性，以便在JavaScript中引用它。

然后，我们可以使用以下JavaScript代码来获取右侧div的高度，并将其应用于左侧div：

var leftDiv = document.getElementById("leftDiv");
var rightDiv = document.querySelector(".right-div");
leftDiv.style.height = rightDiv.offsetHeight + "px";

以上代码通过获取右侧div的offsetHeight属性来获取其高度，并将该高度应用于左侧div的style.height属性，从而实现两个div高度相等的效果。

示例

以下是一个完整的示例，演示如何使用CSS和JavaScript使左侧div的高度与右侧div相同。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }
    .left-div {
      flex: 1;
      background-color: lightblue;
      padding: 10px;
    }
    .right-div {
      flex: 1;
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-div" id="leftDiv">Left Div Content</div>
    <div class="right-div">Right Div Content<br>Right Div Content<br>Right Div Content</div>
  </div>

  <script>
    var leftDiv = document.getElementById("leftDiv");
    var rightDiv = document.querySelector(".right-div");
    leftDiv.style.height = rightDiv.offsetHeight + "px";
  </script>
</body>
</html>

在上面的示例中，左侧div和右侧div的高度将自动保持一致，并且当右侧div的内容变化时，左侧div的高度也会自适应调整。