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>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>
</div>

Solution

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

$(document).ready(function(){
    $('.container').each(function(){  
        var highestBox = 0;
        $(this).find('.column').each(function(){
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  
            }
        })
        $(this).find('.column').height(highestBox);
    });    
});

Result :

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

There are currently no comments.