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

Question

我有 2 个不同的 div 和不同的 parent ，我想让它们成为最高的那个的高度。

我用下面的代码做到了这一点:

<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 现在具有相同的高度，我的问题是它们比应有的高度高。 Left 的 child 的高度加起来只有 600px 左右，但 left 现在的高度已经达到 737px。

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

Answer 1

我看到的唯一问题是您的 CSS。具体与 position:absolute;和转变。

看看这个 fiddle ，我在其中使用了没有 CSS 的代码:https://jsfiddle.net/g0utu4bz/

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