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

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 был на несколько секунд впереди меня.