JQuery: Évolution de la Hauteur de la Base d'un Autre Élément

J'ai deux DIVs: Un DIV dynamiquement les changements de taille en fonction du navigateur (responsive design) et je veux que les autres DIV pour modifier sa hauteur en fonction de la première division de la hauteur. J'ai pensé que la meilleure façon de le faire serait d'utiliser JQuery pour modifier dynamiquement la hauteur.

J'ai essayé le suivant:

$('section#div2').css({height:$(this).css('height').replace($('section#div1 div.div1_container').height()+'px')});

Toutefois, ce code ne fonctionne pas. Ni sont différents des autres versions de ce travail.

Ma question est: Comment puis-je remplacer une seule propriété CSS sans modifier l'ensemble des propriétés d'un élément donné?

EDIT: C'est comment la dynamique de la première DIV est codé...

Premier de la première DIV conteneur:

position: relative;
padding-bottom: 50%;
padding-top: 30px; height: 0; overflow: hidden;
margin:0 0.7em 0 0.7em;

Puis, à l'intérieur de l'objet à l'intérieur de ce conteneur (peut ne pas être pertinent):

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

OriginalL'auteur Justin | 2012-06-06

  1. 7
    $('section#div2').css('height', $('section#div1').height()+'px');
    J'ai essayé et ça ne fonctionne toujours pas. Je vais mettre à jour la question de la dynamique de code pour la première div dans le cas qui a aucun impact... en fait, quand j'ai essayé le code que vous avez énumérés, c'était le même résultat, pas de changement à la hauteur quand la page a été chargée.
    Le balisage html est en fait un peu plus important. J'ai mis à jour le jQuery avec ce que je pense que vous êtes en train de faire, fondamentalement, vous voulez la hauteur de la section#div2 être les mêmes que dans la section#div1 correct?
    Oui, mais cela ne fonctionne toujours pas. Je pense que le problème est peut-être la façon dont la première DIV est codé, étant donné que la hauteur est techniquement zéro. Mais, j'ai essayé de définir égal à l'intérieur de la DIV en trop (qui est de 100%) et cela ne fonctionne toujours pas... Merci pour les idées, pour beaucoup même si!
    Ok, j'ai ajouté un autre intérieure DIV à 100% de la largeur et la hauteur, et cela a fonctionné! Merci pour votre aide!

    OriginalL'auteur Jason Kulatunga

  2. 2

    Utiliser ceci:

    $('section#div2').height($('section#div1').height());
    Je ne suis pas sûr de ce que vous entendez par là... désolé!
    Oui, mais il ne fait pas référence au premier DIV, comment serait-il obtenir la hauteur? Je l'ai essayé et il n'a rien fait. Avez-vous l'intention d'inclure cela dans mon CSS sélecteur ci-dessus quelque part?
    Merci cela fonctionne aussi! J'ai déjà accepté la première réponse mais qui fonctionne également. Je vais vous donner un vote bien pour la réponse, j'apprécie l'aide!
    Comme pour laquelle on est le mieux, j'ai été à la recherche pour mettre à jour le CSS via la .css() sélecteur plutôt que de la .hauteur() attribut directement. Bien que cette réponse est techniquement moins de lignes de code.
    de ne pas être contradictoire, mais si vous regardez le jquery 1.7 source sur les lignes 6827 et 6670, en interne, $.hauteur() appelle l' $.css() méthodes.

    OriginalL'auteur Will