Dynamic Sidebar Height for WordPress and the Thesis Theme

One of the things web designers like are brightly colored, drop-shadow sidebars that match the content height on evey web page.  Because content height depends on the content and sidebar height depends on the number and size of the widgets in the sidebar, it takes a bit of dynamic thinking.  You need to know two things:  (1) How high is the content and (2) what’s the current size of the sidebar?  Given that, the forehead slapping moment comes from finding that one can reset the CSS for an element on the fly using JavaScript.

The sidebar in question is in a DIV with the ID sidebar_1, floated to the left side of the page.  The content is in a DIV with the ID content, floated to the right  

If you find yourself with a similar problem, add a text widget to the sidebar and paste in the following JavaScript:

<script type="text/javascript">
<!--
var divh = document.getElementById('content').clientHeight;
var sb1 = document.getElementById('sidebar_1').clientHeight;
document.write(" ");
if (sb1 < divh) { 
 document.getElementById('sidebar_1').style.height=divh+"px";
}
//-->
</script>