当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《获取IE中自动加高元素的实际高度》经验,为你挑选了1个好方法。

我很困惑!有了这个:

...
...COLUMN1 CONTENT GOES HERE...
...COLUMN2 CONTENT GOES HERE...
...

你看到有列,我想将容器元素的高度设置为两列的最大大小(加上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;
}

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

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



1> sepehr..:

作为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成为所述列的唯一包装器,然后设置剩余的样式以实现所需的目标.

推荐阅读
周扒pi
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有