0

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.

Leon N
  • 103
  • 2
  • 14
  • `clientHeight` is read only, you cannot assign values to it. `The Element.clientHeight read-only property...` https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight – GrafiCode May 18 '22 at 08:18
  • you should use `curblok.style.height = ...` – GrafiCode May 18 '22 at 08:20
  • Can you give us a [minimal code example](https://stackoverflow.com/help/minimal-reproducible-example) to see your case ? – Cédric May 18 '22 at 08:21
  • I think you can easily handle it in CSS with flexbox, please see this: https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-div-elements-the-same-height – GrafiCode May 18 '22 at 08:23

1 Answers1

2

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).

Juan Marco
  • 3,081
  • 2
  • 28
  • 32
akash
  • 101
  • 1
  • 9
  • Yesss, the setting of the curblock height works this way. The special thing is although the 'slider-gaea' has 662px height, the clientheight is given as 466 px. So still both div's do not have the same height .... No idea why (sorry from a newbie) – Leon N May 18 '22 at 15:58
  • clientHeight = height of an element + vertical padding Whereas offsetHeight = height of the element + vertical padding + top and bottom borders + horizontal scrollbar (if it's available). You can try accordingly. – akash May 18 '22 at 16:22
  • Unfortunately offsetHeight and clientHeight both have the same value. I searched for all kinds of properties with name height in it and also searched for any property holding 662, but no property came up. Perhaps I should point to another div – Leon N May 19 '22 at 05:43
  • Finally I found out that Firefox gives alternative pixelheights if in inspection modus. When I quit the inspectionmodus the pixelheights are as they should be. So problem solved!! Thanks for the help – Leon N May 19 '22 at 06:02