Question

I have two DIVs: One DIV dynamically changes size based on the browser (responsive design) and I want the other DIV to modify its height based on the first DIV’s height. I thought the easiest way to do this would be to use JQuery to dynamically change the height.

I tried the following:

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

However, that code isn’t working. Nor are various other versions of that working.

My question is: How can I replace a single CSS property without changing all of the properties for a given element?

EDIT: This is how the dynamic first DIV is coded…

First the first DIV’s container:

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

Then, the inner object within that container (may not be relevant):

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

Answer 1

$('section#div2').css('height', $('section#div1').height()+'px');