如何使两个堆叠的div具有相同的高度

要使两个堆叠的div具有相同的高度，可以使用以下方法：

使用Flexbox布局：将两个div包裹在一个父容器中，并设置父容器的display属性为flex。然后，将子div的flex属性设置为1，这样它们将自动平分父容器的高度。

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
</div>

<style>
.container {
  display: flex;
}

.div1, .div2 {
  flex: 1;
}
</style>

使用CSS表格布局：将父容器的display属性设置为table，将子div的display属性设置为table-cell。这样，子div将自动具有相同的高度。

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
</div>

<style>
.container {
  display: table;
}

.div1, .div2 {
  display: table-cell;
}
</style>

使用JavaScript动态设置高度：通过JavaScript获取两个div的高度，然后将较短的div的高度设置为与较高的div相同。

<div class="div1">Content 1</div>
<div class="div2">Content 2</div>

<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');

var maxHeight = Math.max(div1.offsetHeight, div2.offsetHeight);

div1.style.height = maxHeight + 'px';
div2.style.height = maxHeight + 'px';
</script>

以上是三种常用的方法来使两个堆叠的div具有相同的高度。根据具体的需求和布局情况，选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：