Setting DIV Height with Javascript Problem

JavaScript
1

Hi,

function setMainH(){
  obj1=document.getElementById('left');
  obj2=document.getElementById('right');

  H=Math.max(obj1.offsetHeight,obj2.offsetHeight);
  obj1.style.height=H+'px';
  obj2.style.height=H+'px';

}
window.onload=setMainH;

This is what I use to set equal DIV heights on my website. The DIV columns named “left” and “right”.

Using this, it ADDS to the total DIV height, it makes them equal, but adds unwanted white space.

  H=Math.max(obj1.offsetHeight,obj2.offsetHeight);
  obj1.style.height=H;
  obj2.style.height=H;

I thought that would get the larger height of the two DIVs, and set both of them to this height, thus eliminating the white space, but it does not work. Any thoughts?

2

adds unwanted white space
?
Maybe you mean it counts border? Try clientHeight.

3

When you set the style.height or width you are measuring its content area only-
offsets measure to the outside of the element, including any padding and border lengths.

You can subtrack a % or constant from the offset,
or find the difference every time-

obj1.style.height=H+‘px’;

// get the new ‘outside’ height difference
diff=obj1.offsetHeight-H;
H=H-diff;

// set the style-height to the adjusted amount
obj1.style.height=H+‘px’; obj21.style.height=H+‘px’;

It is tempting to use clientHeight,
but it adds padding or border size for some elements in some browsers.

4

I m not sure if it counts border. Its adds a couple of lines to both DIVs, so it then becomes longer and taller than the longest DIV. Not sure if that makes sense.

5

Look at the documentation for clientHeight and offsetHeight:

They include a diagram to help you understand what each one measures.