如何使两个并排的 div 元素保持相同的高度?

htmlweb developmentfront end technology更新于 2024/7/19 7:08:17

我们需要使两个并排的 div 保持相同的高度，这样，如果向任何一个 div 添加更多内容，另一个 div 的大小都会匹配。以下两个示例涵盖了 -

使用 HTML 保持两个并排的 div 元素保持相同的高度
使用 JavaScript 保持两个并排的 div 元素保持相同的高度

让我们逐一查看示例 -

使用 HTML 保持两个并排的 div 元素保持相同的高度

示例

我们将使用以下代码使两个并排的 div 元素保持相同的高度 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{
         display: table-row;
      }
      .box1{
         display: table-cell;
         background: red;
         color: white;
      }

      .box2{
         display: table-cell;
         background: orange;
         color: white;
      }        
   </style>
</head>
<body>
<h1>Two Divs</h1>
<div class = "container">
   <div class ="box1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
   </div>
   <div class = "box2">
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
   </div>
</div>
</body>
</html>

输出

向第二个 div 添加更多内容，您可以看到两个 div 的大小都会增加 -

输出

使用 JavaScript 使两个并排的 div 元素保持相同的高度

示例

我们将使用以下代码，使用 JavaScript 使两个并排的 div 元素保持相同的高度。height() 用于匹配两个 div 的高度 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .box1{
         display: table-cell;
         background: red;
         color: white;
      }

      .box2{
         display: table-cell;
         background: orange;
         color: white;
      }        
   </style>
</head>
<body>
   <div class ="box1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
   </div>
   <div class = "box2">
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
      Nunc et nisl et justo viverra fermentum.<br/>
   </div>
   <script>
      $(".box2").height($(".box1").height());
   </script>
</body>
</html>