Set equal height and change it on resize

Question

I have a responsive layout, for which I need to have some divs with equal height, which automatically change height on resize.

I am setting the equal height with this script:

$(window).load(function() {
$('.test').css({
    'height': $('.test').height()
});
});

Here is my HTML structure:

    <div class="row front-rows">
        <div class="span3">
            <div id="post">
                <div class="front-row-image">
                    <a href="#"></a>
                </div>
                <div class="test">
                    <h2>Test</h2>
                    <div class="text">Lorem Ipsum dolore</div>
                    <div class="read-more-link">
                        <a href="#"><span class="pull-left">Read More</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

But when the height is set it keep this height when I resize, and I don't know how to change the size again on resize?

The equal height should be set when the page loads - and change on each resize.

Can anyone help? :)

Answer 1

Use the resize() function:

$(window).resize(function() {  
    $('.test').css({
        'height': $('.test').height()
    });
});

Answer 2

use the .resize() instead of .load() http://api.jquery.com/resize/

although for your end goal I wouldn't use javascript/jquery at all. you can probably achieve what you are looking for using CSS height property with a percent value.

looks like BenM was just a few seconds ahead of me.