get height of a div and set the height of another div using it

Question

I have two divs, neither have a height set in css, as I want to take whatever height they end up as and set the other div to be that height.

The javascript I have is

Answer 1

You can use jQuery to get the height and set it.

var h = $("#prCol1").height();
$("#prCol2").height(h);

Answer 2

you can get height by this code:

document.getElementById('YourElementID').clientHeight;

Answer 3

Use offsetHeight - http://jsfiddle.net/HwATE/

function fixHeight() {
    var divh = document.getElementById('prCol1').offsetHeight; /* change this */
    document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
    document.getElementById('prCol2').style.height = divh + 'px';
}

Answer 4

There are jQuery plugins to do this in a general way. Here's one.

Answer 5

I would recommend using jQuery here. You can't get the height of an element like you are trying in any browser I know of. Here is the code if you use jQuery which is very straightforward. I wouldn't try to do this without jQuery because browsers can be different in respect to how you access height.

function fixHeight() {
    var $prCol1 = $('#prCol1');
    var divh = $prCol1.height();
    $prCol1.html('<ul><li>' + divh + '</li></ul>');
    $('#prCol1').height(divh);
}