Установите равную высоту и измените ее при изменении размера

Question

У меня есть адаптивный макет, для которого мне нужно иметь несколько div с одинаковой высотой, которые автоматически меняют высоту при изменении размера.

Я устанавливаю равную высоту с помощью этого сценария:

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

Вот моя структура HTML:

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

Но когда высота установлена, она сохраняется при изменении размера, и я не знаю, как снова изменить размер при изменении размера?

Равная высота должна быть установлена ​​при загрузке страницы - и изменяться при каждом изменении размера.

Кто-нибудь может помочь?:)

Answer 1

Использовать resize() функция:

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

Answer 2

Использовать .resize() вместо.load () http://api.jquery.com/resize/

хотя для вашей конечной цели я бы вообще не использовал javascript/jquery. Вы можете, вероятно, достичь того, что вы ищете, используя CSS height недвижимость с процентным значением.

Похоже, BenM опередил меня всего на несколько секунд.