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）へのコンテナ要素の高さを設定します。そのプロトタイプフレームワークを使用することにより：

//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、オペラ、サファリ& Chromeでの素敵な作業が、それは、列の実際の高さを返すことができません。 IE7 +（IE6ではテストされていません）では、NaNを高さの列として返します。
私は、このためだ見つけることができた。私はまた、「$（ 『COL1』）offsetHeight」を使用してきましたし、それが各列の高さの値として0を返すだ

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

。

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

問題上の任意のアイデアください！

更新 /解決に3日かかりました。私は賞金を払う危険がありました。解決のために
をご覧ください。this question/answerをご覧ください。

Answer 1

マークの答えが完成しました。 jQueryの高さと等しいはプロトタイプで）（あります：

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

そして、ここではドキュメントです：http://prototypejs.org/api/element/getDimensions

アップデート：私は以下crescentfreshに同意します。私は過去に全く同じ問題を抱えていたので、可能なすべてのメソッドを検索してディメンションのプロパティを探しましたが、失敗しました。ご覧のとおり要素の計算レンダリングされた現在のスタイルを取得することが、私たちの場合にも、この方法では、私は推測し、失敗し、機能has been writtenを

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 saidのように、CSSの位置付け方法で問題を見つける必要がありますが、マジックを実行できる適切なjavascript機能を求めて時間を浪費することはありません。まず、#content DIVを削除し、#mainを前記列の唯一のラッパーにして、残りの部分をスタイリングして目的の目標を達成するようにしましょう。より

Answer 2

Artarad、
上記のスタイルは、高さを割り当てられていないことを示しています。 _heightを追加してみてください：基本的には、多くのブラウザは、特定のdivまたは任意の要素に割り当てられたときの高さを認識できない

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

のようになります。クラスの自動車。この場合、上記の回避策を使用します。 上記があなたに役立つことを願っています。

おかげで、
Samiksha

Answer 3

それは（テストなし）動作する場合、私は知らないが、あなたはjQueryとheight()を試みることができます。これは（理論的に）計算された高さを与える。試してみる価値があります...

Answer 4

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

実際には寸法を有していない 文書レンダリングプロセスにおいて 参加していない、および0.1

のoffsetWidth /高さを与える要素PrototypeのgetDimensions()とjQueryのheight()の両方が、offsetHeightまたはclientHeightのプロパティを読み取りましたあなたのコードでは何かがレンダリングの流れの中で#colである必要があります。それは私が考えることができるすべてです。

Answer 5

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 6

私はこれが古い質問です知っているが、Iより良い答えが見つかりました "修正CSSとは、JavaScriptを忘れて"。

私は同じ問題を抱えており、.innerHeight()を使用し、jQueryに高さを計算させました。何らかの理由で.outerHeight()が動作しませんでしたが、.innerHeight()が問題を解決しました。プロトタイプに似た方法があるかどうかは不明です。あなたはjQueryライブラリを調べて、.innerHeight()の仕組みを理解し、自分で書くことができます。