获取IE中自动加高元素的实际高度

Question

我很困惑!有了这个:

...
<div id="main">         
    <div id="content">
        <div class="col1">
        ...COLUMN1 CONTENT GOES HERE...
        </div>

        <div class="col2">
        ...COLUMN2 CONTENT GOES HERE...
        </div>
    </div><!-- #content -->
</div><!-- #main -->
...

你看到有列,我想将容器元素的高度设置为两列的最大大小(加上130px).所以通过使用Prototype框架:

//fixing column height problem
Event.observe(window,"load",function(){             
    if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
        $('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
    else
        $('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe

它在Firefox,Opera,Safari和Chrome中运行良好但它无法返回列的实际高度.在IE7 +中(未在IE6中测试),它返回NaN作为列高度.
我设法找到了因为这个:

.col1,.col2{"height:auto;"}

我还使用了"$('col1').offsetHeight"并且它返回0作为每列的高度值.

HTML以这种方式设置样式:

#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}

关于这个问题的任何想法好吗？!

更新 /花了三天时间才解决,而且我很有可能获得赏金!
对于解决方案,请看一下这个问题/答案.

Answer 1

作为Marc答案的完成; 原型中jQuery的height()是相等的:

$('col1').getDimensions().height //or .width ofcourse

这是文档:http://prototypejs.org/api/element/getDimensions

更新:我同意下面的crescentfresh.由于我过去遇到了绝对相同的问题,我已经搜索了所有可能的方法来查找维度属性但是我失败了.请看看这个:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

如您所见,该函数已被编写以获取元素的计算渲染当前样式,但在我们的情况下,即使这种方法也会失败,我想.(值得一试)

所以,正如crescentfresh 所说,你必须在你的CSS定位方法中找到问题而不是浪费你的时间寻找一个能够做到魔术的正确的javascript函数.让我们首先删除#content DIV并让#main成为所述列的唯一包装器,然后设置剩余的样式以实现所需的目标.