CODEWITHSUNDEEP
javascriptcss
Leon N
Leon N

Reputation: 133

Set height of a div dynamically

I try to adjust the height of a div, based on the height of another div. Looks quite simple.. But unfortunately, it does not work. So please give me a hand in this. Here is my code:

   anderblokhoogte = document.getElementById('slider-gaea');
   var curblok = document.getElementById('curiculum');
   curblok.clientHeight = anderblokhoogte.clientHeight + 'px !important';

I proved the element 'slider-gaea' exists, but the clientHeight of 'anderblokhoogte' differs from the height I see when inspecting this element. But also, the adjustment of the curblok.clientHeight does not give a change in height of the target element.

I already tried quite some options (other properties like 'style.height', 'offsetHeight') but no idea what mistake I make.

Upvotes: 1

Views: 3073

Answers (1)

akash
akash

Reputation: 99

anderblokhoogte = document.getElementById('slider-gaea');
var curblok = document.getElementById('curiculum');
document.getElementById('curiculum').style.height = anderblokhoogte.clientHeight + 'px';
<div id="slider-gaea" style="height:100px;"> First Div Block </div>
<div id="curiculum"> Second Div Block</div>

You cannot set height using .clientHeight instead use .style.height and you need to lose the !important at the end as well.

Element.clientHeight is a read-only property.

Note: While HTMLElement.style is also a read-only property, it is possible to set an inline style by assigning a string directly to the style property (see example above).

Upvotes: 2

Related Questions