[Solved] How to match height of 2 divs

by


You can do this using jquery: 

// get height of left summary and set right summary to the same on page load
var summaryLeftHeight = $(".summary-left").height();
$(".summary-right").css("height", summaryLeftHeight + "px");

// add this to make sure they have the same height on page resize 
$(window).on("resize", function(){
   var summaryLeftHeight = $(".summary-left").height();
   $(".summary-right").css("height", summaryLeftHeight + "px");
});

You can also do this by using http://brm.io/jquery-match-height/ :
Include the cdn in your code 

<script src="https://stackoverflow.com/questions/52187421/jquery.matchHeight.js" type="text/javascript"></script>

Updated HTML (I added the class=”summary” to each element that you want to be the same height): 

<div class="order-summary">
  <ul>
     <li class="li-summary">
        <div class="summary summary-left">Name:</div>
        <div class="summary summary-right">Ehtesham Ali</div>
     </li>
     <li class="li-summary">
        <div class="summary summary-left">Delivery Address:</div>
        <div class="summary summary-right">House 1, Street 1</div>
     </li>              
  </ul>
</div>

And initialize the code in your js file or in a script tag

$(function() {
    $('.summary').matchHeight();
});

The plugin selects the element with the largest height by default but you can select a target by selecting the option target, like this: 

$(function() {
    $('.summary').matchHeight({
        target: $('.summary-left') // using summary left as the target 
    });
});

6

solved How to match height of 2 divs