CSS, HTML, jQuery, Tutorials

jQuery Match Height of Two Divs

13 June 2018

Here we will see how to equal height columns dynamic content with jQuery :

Current Design :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>


Just put the below code modify as per your requirement.
Don’t forget to add jQuery min file into the code.

        var highestBox = 0;
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  

Result :

We can see that the column height are same for same row. So we can make div height dynamic as per content.

Leave a Comments