jQuery de modifier dynamiquement la hauteur d'élément

Je suis en train de travailler sur un design fluide projet. J'ai une certaine hauteur fixe DIVs dans mon document, et les hauteurs sont différentes pour chacun d'eux. J'ai besoin d'proportionnellement modifier ces DIVs de la hauteur du navigateur pour le redimensionner. Voici le balisage.

<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body> 

Et css:

<style>
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; }
    #a { height: 200px; background-color: yellow;}
    #b { height: 400px; background-color: green;}
    #c { height: 600px; background-color: grey;}
</style>

Semble facile!
La condition principale est que je ne sais pas le precize montant de la cible DIVs et leur Id, c'est pourquoi je suis à l'aide .each(function()).
Voici le script que j'ai écrit:

$(document).ready(function(){
//set the initial body width
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/
$(".target").each(function() 
{
    //get the initial height of every div
    var originalHeight = $(this).height(); 
    //get the new body width
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height
    var newHeight = originalHeight + (widthDiff / 10); 
    //sets the different height for every needed div
    $(this).css("height", newHeight); 
});

});

Ce script fonctionne parfaitement lorsque l'utilisateur de recharger la page.
Comment puis-je obtenir les mêmes résultats dinamically, lorsque l'utilisateur redimensionne le navigateur sans avoir à recharger?
Je sais que je devrais appliquer $(window).redimensionner écouteur d'événement. Mais le problème est que la DIV initiale de hauteur sera calculée à l'intérieur de l'événement et le résultat sera almoust comme boucle sans fin - c'est la finale de la hauteur de l'augmentation ou de la diminution énorme progression. Je n'ai pas besoin que!
Comment puis-je faire chaque DIV hauteur initiale de calcul à l'extérieur de fonction d'événement, puis l'utilisation de ces hauteurs en fonction d'événement? Ou peut-être il ya une autre approche pour obtenir le même résultat?

OriginalL'auteur theCoder | 2012-06-16