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

Question

I have 2 different divs with different parents and I would like to make them the height of the tallest one.

I managed that with the following code:

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

the 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 -->

And the 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%);
}

This works, both divs now have the same height, my problem is that they are taller than they should be. Left's children only add up to about 600px in height, but left has 737px in height now.

I found that the problem could be the script above because when I delete it, left does take the height of it's children.

Answer 1

The only problem I see is with your CSS. Specifically with the position:absolute; and transform.

Look at this fiddle where I used your code without CSS: https://jsfiddle.net/g0utu4bz/

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

Answer 2

I've edited the content using flex-box and media queries, in order to match the request... and i've added some css to be a litte more mobile-friendly (but is only a little optimization, your layout need some more work ;) )

I hope that this will be helpful!

Ps expand the snipped ("run code" -> "full page") to see correcty how media queries works, otherwise you'll see only 1 column!

 .left-right-container { display: flex; flex-direction: column; } @media (min-width: 768px) { /* this rules will be used only on devices with large screen, to make the layout a little bit more responsive */ .left-right-container { flex-direction: row; } .left-right-container .left { width: 600px; } .left-right-container .right { width: 400px; } .left-right-container .last { min-height: 50px; /* as many as you need to show socials */ } } .left-right-container .left, .left-right-container .right { height: 100%; display: flex; flex-direction: column; } .left-right-container .left { background: green; } .left-right-container .right { background: red; } .left-right-container .left > *, .left-right-container .right > * { flex-grow: 0; } .left-right-container .left > .take-all, .left-right-container .right > .take-all { flex-grow: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left-right-container"> <div class="contact-information"> <div class="centered right"> <h3>INFORMATII</h3> <p>Strada</p> <div class="social-icons-wrapper take-all"> 1<br>2<br>3<br>4<br>5<br>6 </div> <div class="last">other content</div> </div><!-- centered --> </div><!-- contact-information --> <div class="contact-box"> <div class="width-for-centering left"> <h3>CONTACTEAZA-NE!</h3> <p>Completeaza</p> <div class="tocenter take-all" data-aos="zoom-out"> 1<br>2<br>3 </div> <div class="last">other content</div> </div><!-- width-for-centering --> </div><!-- contact-box --> </div> 

Answer 3

Its pretty easy with flexbox, you could do something like this:

 .wrapper { display: flex; } #right{ width:400px; background-color: red; } #left{ width:600px; background-color: blue; } 

 <div class="wrapper"> <div class="contact-information" id="right"> <div class="centered"> <h3>INFORMATII</h3> <p>Strada</p> <div class="social-icons-wrapper"> .... </div><!-- social-icons-wrapper --> </div><!-- centered --> </div><!-- contact-information --> <div class="contact-box" id="left"> <div class="width-for-centering"> <div class="contact-title"> <h3>CONTACTEAZA-NE!</h3> <p>Completeaza</p> </div><!-- contact-title --> <div class="tocenter" data-aos="zoom-out"> </div><!-- tocenter --> </div><!-- width-for-centering --> </div><!-- contact-box --> </div>