Dynamically resizing navigation div to main content

4 Views

Greetings and Hello
I am trying to put together a wordpress site, now because the content in the main div is going to be a different height with every page I need the navigation sidebar to stretch to the same height.
So with a little javascript tom-foolery I can get the sidebar to be the same height with the following code 

function adjust(){
    hgt=document.getElementById('content').offsetHeight;
    document.getElementById('sidebar').style.height=hgt+'px';

}
window.onload=adjust;
window.onresize=adjust;

Now that’s all good for a long page but if the content is smaller then the sidebar stuff gets all messy. So I have tried an if statement like so

Read More
function adjust()
{
if (document.getElementById('content').style.height <  document.getElementById('sidebar').style.height){
hgt=document.getElementById('content').offsetHeight;
document.getElementById('sidebar').style.height=hgt+'px';
else
hgt=document.getElementById('sidebar').offsetHeight;
document.getElementById('content').style.height=hgt+'px';
}
}
window.onload=adjust;
window.onresize=adjust;

But that just doesn’t do anything, so any ideas whats going on?

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. the new code if anyone needs it 

    function adjust()
{
    if (document.getElementById('content').offsetHeight < document.getElementById('sidebar').offsetHeight)
        {
        hgt1=document.getElementById('sidebar').offsetHeight;
        document.getElementById('content').style.height=hgt1+'px';
        }
        else
        {
        hgt2=document.getElementById('content').offsetHeight;
        document.getElementById('sidebar').style.height=hgt2+'px';
        }

}
window.onload=adjust;
window.onresize=adjust;

  2. could be several reasons:

    1) as Waleed says you are missing a closure.

    2) If you did not set an explicit style for 

    document.getElementById('sidebar').style.height

    it will return “”

    3) Be careful assuming style.height and offsetHeight are equivalent. Depending on browsers, one or the other may be accounting for margins and paddingC: