javascript pull css value, set another elements value

[mwbarry]

My website has a content area that changes height depending on what page of the site you are on. There is a sidebar that I want to match the height of the content, no matter how high it is.I am trying to write a javascript function to accomplish this.

function shadowlength() {var thecontent = document.getElementById('mainbody');var theheight = thecontent.style.height;document.getElementById('sideleft').style.height = theheight;document.getElementById('sideright').style.height = theheight;}

#mainbody is the content area that changes height, #sideleft & #sideright are the two sidebars that are supposed to match the contents height.

#mainbody {height: 100%;width: 100%;background-color: #B8B8B8;}

Any ideas?

[Don E]

For the value, try:

= theheight + "%";

[mwbarry]

That doesn't work as setting #sideleft to 100% height in the css it has no height. I think it has to return a pixel value. For testing purposes I set #mainbody to height: 900px; and the function still did not work.

[dsonesuk]

for

var theheight = thecontent.style.height;

to work, a inline css style for height must be set

<div id="mainbody" style="height:500px;">

to retrieve the height of mainbody depending on content within it, with no inline styling set use offsetHeight, and add "px" to end of variable theheight.

var theheight = thecontent.offsetHeight;document.getElementById('sideleft').style.height = theheight+"px";document.getElementById('sideright').style.height = theheight+"px";

[mwbarry]

You are my hero