工业工程中自动高程单元的实际高度

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 -->
...

正如您所看到的，有些列，我希望将它们的容器元素的高度设置为两列的最大大小(加上130 as )。因此，通过使用原型框架：

//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的高度()是相等的：

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

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

更新：我同意下面的新月形。由于我在过去遇到了完全相同的问题，我搜索了所有可能的方法来查找维度属性，但是我失败了。请看一看：

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;
}

正如您所看到的，函数已写成获得元素的计算呈现当前样式，但是在我们的例子中，我想即使这个方法也会失败。(值得一试)

因此，作为新的说，您必须在您的CSS定位方法中找到问题，同时不要浪费您的时间去寻找一个合适的javascript函数，它可以做到这一点。让我们首先删除该#content，并让#main成为所述列的唯一包装器，然后对剩余部分进行样式化，以达到预期的目标。

Answer 2

既然IE想给你一个艰难的时刻，你可以给予它一些特别的关注，并使用一个我相信它会承认的财产。

var height;
if(document.all) { //This means it is IE
  height = document.getElementById('col1').offsetHeight;
}
else {
  height = //Use what is working in other browsers now
}

Answer 3

来自：为什么jquery会返回0作为一个offsetHeight，而firebug说它是34？

没有实际参与文档呈现过程的元素没有维度，它的偏移宽度/高度为0。

Prototype的getDimensions()和jQuery的height()都读取offsetHeight或clientHeight属性，您已经尝试并获得了0。因此，在您的代码中一定有一些东西将#col从呈现流中删除。这就是我所能想到的。