How to make a column height match another

JavaScript
1

Can someone please tell me how to make my left hand column DIV (my site nav) match the same height of the main content DIV.

Im pretty clueless at JS but guess this is way to do it:

  • Capture the height attribute of the main DIV from the DOM into a variable
  • Copy this value into the height attribute of the left hand DIV and hey presto they match?

Can somone point me in the best direction to achieve this.

Cheers.

2

I’ll try to take a stab at this, I did not have time to test this, but it should get you going in the right direction, I hope :slight_smile:



var divID1 = '' ; //set this to the id of  your first div
var divID2 = '' ; //set this to the id of your second div

function matchHeight() {

  if (document.getElementById(divID1) != null && document.getElementById(divID2) != null) {

//get the height of the first div
   var div1height = document.getElementById(divID1).offsetHeight;

//now set the height of the second div
document.getElementById(divID2).offsetHeight = div1height;

  }


}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


addLoadEvent(matchHeight);