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

请问这个问题吗？！

更新 /需要三天的时间来解决，而我很有可能获得赏金！
有关解决方案，请查看this question/answer。

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

正如您所见，函数has been written用于获取计算呈现元素的当前样式，但在我们的情况下，即使这种方法也会失败，我猜。（值得一试）

所以，作为crescentfresh said，你必须在你的CSS定位方法中找到问题，同时不要浪费你的时间寻找一个能够做到神奇的正确的javascript函数。让我们首先删除 #content DIV并让 #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

自： Why would jquery return 0 for an offsetHeight when firebug says it's 34?

实际上没有采取的元素部分在文档呈现过程中没有尺寸，会给出一个 offsetWidth /高度为0。

Prototype的getDimensions()和jQuery的height()都读取了offsetHeight或clientHeight属性，您尝试过这些属性并获得0.因此，代码中的某处必须有< em> something 从渲染流程中取出#col。这就是我能想到的全部。

Answer 4

Artarad，
上面的样式即css表明你没有指定高度。请尝试在类中添加_height：auto，看起来像

    .col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}

基本上，许多浏览器在分配给特定div或任何元素时无法识别高度。在这种情况下，我们使用上述工作。我希望上面有所帮助。

谢谢，
Samiksha

Answer 5

我不知道它是否可行（未经测试），但您可以尝试jQuery和height();这（理论上）给出了计算的高度。值得一试......

Answer 6

我知道这是一个老问题，但我找到了比“修复css并忘记javascript”更好的答案。

我有同样的问题并使用.innerHeight()并强制jQuery计算高度。出于某种原因，.outerHeight()在.innerHeight()解决问题时无法正常工作。不确定原型是否有类似的方法。您可以查看jQuery库并找出.innerHeight()如何工作，并编写自己的。

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

6 个答案: