动态调整导航 div 的大小以适应主要内容

发布于 2024-08-27 04:56:15 字数 902 浏览 6 评论 0原文

问候和你好
我正在尝试构建一个 WordPress 网站，现在因为主 div 中的内容将具有不同的高度，每个页面我需要导航侧边栏拉伸到相同的高度。
因此，通过一些 javascript tom-foolery，我可以使用以下代码使侧边栏具有相同的高度

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

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

现在这对于长页面来说一切都很好，但如果内容较小，那么侧边栏的内容就会变得混乱。所以我尝试了像这样的 if 语句

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;

，但这没有任何作用，所以有什么想法发生了什么吗？

原文

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦浮鱼 2024-09-03 04:56:15

如果有人需要新代码

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;

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;

回复收藏 0 原文

蘑菇王子 2024-09-03 04:56:15

可能有几个原因：

1）正如瓦利德所说，你错过了一个封闭。

2) 如果您没有设置显式样式，

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

它将返回“”

3) 请小心假设 style.height 和 offsetHeight 是等效的。根据浏览器的不同，其中之一可能会考虑边距和填充C：

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:

回复收藏 0 原文

~没有更多了~