0

我基本上在网站上使用 3 列布局。我想要实现的是中间（内容）列的高度调整到右列（侧边栏），所以中间列右侧的边框到达页面底部。此外，我还希望左列将其高度调整为其他列，并在页面底部用背景图像单元填充它。

网站： http: //www.massageforum.be

这是我到目前为止所做的（panel_left = 带有背景图像的左列，panel_right 是 div 内容（中间列）和侧边栏（右列）的周围 div）：

function setDivHeight() {
    //set height of content according to sidebar if content is smaller than sidebar
    var DivHeightSidebar = document.getElementById('sidebar').offsetHeight;
    var DivHeightContent = document.getElementById('content').offsetHeight;

    if(DivHeightContent < DivHeightSidebar)
    {
        document.getElementById('content').style.height = DivHeightSidebar + 'px';
    }           

    //set height of panel_left according to panel_right so background image reaches until bottom of page
    var DivHeight = document.getElementById('panel_right').offsetHeight;
    document.getElementById('panel_left').style.height = DivHeight + 'px';
}

</body>在标签之前的每个页面上都会调用此函数。

问题是有时有效，但有时无效。在某些情况下，内容列的高度会调整为侧栏列的高度，尽管它应该更长并且内容不再适合。截图： http: //www.massageforum.be/Massageforum1.png

此外，有时左列的高度未正确调整为 panel_right 的高度。

我在 Chrome、Firefox 和 Safari 中看到了这种行为；没有测试其他浏览器。

有关如何使此功能更强大的任何建议？

4

2 回答 2

1

用 JavaScript 来做这件事不是一个好主意。只需重构页面并使用 HTML/CSS 完成所有操作。

于 2012-05-13T21:21:16.763 回答
0

在调用 setDivHeight 之前，您是否检查过文档是否完成了所有元素的加载？如果在元素仍在加载之前/同时调用该函数，则您读取的高度会更小。我还会考虑将包含列的高度设置为等于容器 DIV 高度（id='page2'），它自然地延伸到最长包含的元素。

于 2012-05-13T21:41:49.420 回答