Dynamic DIV height based on another DIV's height

[Alan_3]

I have a requirement to make the height of a sidebar grow relative to the height of the main window. I currently have a sidebar that is sized to its content, but the main window is always much longer. Is it possible to (a) determine the height of the main windows (ID="leftside") and (b) make the height of the sidebar (ID="rightside") = leftside.height - 10 ?

[JorgeM]

yes, this is doable using simple javascript. I had worked on a blog for a friend a while back and helped with a few lines of javascript to resize the shorter column to match the size of the longer column.

there's a demo you can look at with the source code and explanation: Dynamically Resize Height of Div Elements

Post the code you've worked on to get better guidance on your issue.

[designershiv]

Hi alan,

Look at the below code, it will help...

<script type="text/javascript">
$(document).ready(function(){
    var hL = $('.left').height();
        var hR = $('.right').height();

    if(hL>hR){
        var cH = hL-hR;
        $('.right').height(cH+hR);
    }else if(hL<hR){
        var sH = hR-hL;
        $('.left').height(sH+hL); 
    }
  })
</script>

cH = content height
hL = heightLeft
hR = heightRight

[Alan_3]

@JorgeM: The reference you provided worked beautifully. Thank you.

@designershiv: I didn't understand your code -- Is "right" and "left" supposed to be changed to the IDs of the left & right DIVs? (I'm also not a fan of 2-letter variable names -- They only make sense to the writer, and even then, not for long.) I do appreciate your taking time to respond, though. Thank you.

[designershiv]

alan,

the code i posted is just a sample one, you have to change the values and variable based on your likes and requirement. you asking question here am answering. If it not matching look for some other solution no need to give down vote.this attitude will effect other newbie poster