javascript - 2个无关的div具有相同的高度

我有2个不同的div，父母各不相同，我想让它们达到最高的高度。

我使用以下代码进行管理：

<script>
$(document).ready(function() {
    var height = Math.max($("#left").height(), $("#right").height());
    $("#left").height(height);
    $("#right").height(height);
});
</script>

HTML：

<div class="contact-information">
   <div class="centered" id="right">
       <h3>INFORMATII</h3>
       <p>Strada</p>
       <div class="social-icons-wrapper">
          ....
       </div><!-- social-icons-wrapper -->
   </div><!-- centered -->
</div><!-- contact-information -->

<div class="contact-box">
    <div class="width-for-centering" id="left">
         <div class="contact-title">
             <h3>CONTACTEAZA-NE!</h3>
             <p>Completeaza</p>
         </div><!-- contact-title -->

         <div class="tocenter" data-aos="zoom-out">
            <?php echo do_shortcode('[contact-form-7 id="63" title="formular"]'); ?>
         </div><!-- tocenter -->
    </div><!-- width-for-centering -->
</div><!-- contact-box -->

和CSS

#right{
width:400px;
height: auto;
overflow: hidden;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}

#left{
width:600px;
height: auto;
overflow: hidden;
z-index: 1;
padding-bottom: 0;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}

可行，两个div现在都具有相同的高度，我的问题是它们的高度比应该的高。左边的孩子的身高加起来大约只有600px，但是左边的孩子现在的身高是737px。

我发现问题可能出在上面的脚本，因为当我删除它时，left确实占据了它的孩子的高度。

最佳答案

我看到的唯一问题是CSS。具体的位置：绝对；和转换。

看一下我在没有CSS的情况下使用您的代码的小提琴：https://jsfiddle.net/g0utu4bz/

var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);

关于javascript - 2个无关的div具有相同的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47180948/