将导航div动态调整为主要内容 [英] Dynamically resizing navigation div to main content

问题描述

问候和你好〜
我正在尝试把wordpress网站放在一起，现在是因为主div中的内容会与每个页面的高度不同，所以我需要导航边栏来扩展到相同的高度。

所以，用一个小小的javascript tom-foolery，我可以用下面的代码获得侧边栏的高度：

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;  

现在，对于长页面而言，这一切都很好，但如果内容较小，则边栏内容会变得杂乱。所以我试过了 if 这样的语句。

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

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?

推荐答案

如果有人需要它，新代码

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;

这篇关于将导航div动态调整为主要内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！