动态调整div的高度在网页上

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

网站：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中看到此行为;没有测试其他浏览器。

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

来源

2012-05-13 user1392622

如何改变你的网页结构？我认为用JavaScript实现这一切并不是一个好主意... – Dion

用JavaScript做这件事不是个好主意。只需重新构建页面，并使用HTML/CSS完成。

来源

2012-05-13 21:21:16 Dion

我同意你的观点，避免使用JavaScript总是更好，所以我搜索了一个纯粹的CSS解决方案，并在这里找到它：[link]（ http://www.alphapapahotel.com/equal-height-div-columns-100-percent/css/）。很容易实现，它只是工作。 – user1392622

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

来源

2012-05-13 21:41:49

在实现pure-CSS解决方案之前，我正在玩一些Javascript解决方案。我试过的一件事是使用jQuery插件，并且在$（document）.ready（function（）{funtion goes here ...}）中调用它;'应该确保函数只在所有DOM元素被加载。在大多数测试中，这种方法很有效，但它不是100％可靠的。 – user1392622

动态调整div的高度在网页上

回答

相关问题