Utiliser jQuery pour mettre en miroir la hauteur d'un élément dynamique

Question

J'ai une barre latérale sur ma page que je veux toujours être 100% de la taille du conteneur. Malheureusement, je ne peux pas dire à l'élément de le faire via CSS seul, car la hauteur de la page est variable en raison du contenu dynamique.

Est-il possible d'utiliser jQuery pour trouver la hauteur du conteneur de contenu et ajuster la hauteur de la barre latérale pour qu'il corresponde à celle-ci?

J'ai trouvé quelques plugins jQuery qui font ce que je veux, mais je pense qu'ils sont trop compliqués (et je n'arrive pas à les faire fonctionner quand même!).

Answer 1

En supposant que l'ID de votre conteneur est « conteneur » et l'identifiant de votre barre latérale est « sidebar », vous pouvez essayer ce qui suit (non testé!)

$(document).ready(function() { 
    $('#sidebar').height($('#container').height()); 
}); 

Cela devrait (la charge du document), redimensionner la hauteur de la barre latérale est la même que la hauteur du conteneur.

Answer 2

Je vais continuer de Damovisa's answer.

$(document).resize(function(){ 
    $('#sidebar').height($('#container').height()); 
}); 

Cependant, cela pourrait tirer énormément si vous redimensionnez la page beaucoup. Vous pouvez essayer ceci

$(document).resize(function(){   
     clearTimeout(resizeTimeout); 
     resizeTimeout = setTimeout(function() { 
      $('#sidebar').height($('#container').height()); 
     }, 100); 
    }); 

Dans le deuxième exemple, il ne sera redimensionné que 100 microsecondes après le redimensionnement.

Ceci suppose également que $(document).resize() sera déclenché lorsque la taille de la page change. Vous pouvez toujours l'envelopper dans une fonction, et l'appeler à la fin de tout slideDown() etc