Erhalten der tatsächlichen Höhe eines automatisch erhöhten Elements in IE

Question

Ich bin ziemlich verwirrt! dies mit:

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

gibt es Spalten, wie Sie sehen, und ich möchte ihr Containerelement in der Höhe auf die maximale Größe der beiden Spalten setzen (plus 130px). so von Prototype-Framework:

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

Es arbeitet schön in Firefox, Opera, Safari & Chrome aber es funktioniert nicht die tatsächliche Höhe der Spalten zurück. in IE7 + (nicht in IE6 getestet) gibt es NaN als Spaltenhöhe zurück.
Ich habe es geschafft, weil dieser das ist, um herauszufinden:

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

ich auch „$ (‚col1‘) offset.“ Verwendet haben, und es ist 0 als Höhenwert jeder Spalte zurück.

wird der HTML auf diese Weise gestylt:

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

eine Idee, auf die Frage bitte ?!

update/Es tooks drei Tage zu lösen, und ich war auf dem gleichen Risiko, eine Prämie zu machen!
für die Lösung sehen Sie bitte this question/answer.

Answer 1

Als eine Ergänzung für Marcs Antwort; Es gibt eine gleich für Höhe jQuery() in Prototype:

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

Und hier ist die Dokumentation: http://prototypejs.org/api/element/getDimensions

Update: Ich stimme mit crescentfresh unten. Da ich das absolut gleiche Problem in der Vergangenheit hatte, habe ich alle möglichen Methoden gesucht, um die Dimensionseigenschaften zu finden, aber ich bin gescheitert, wie Sie es tun werden. bitte einen Blick auf diese:

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

Wie Sie sehen, has been written die Funktion die berechnet zu bekommen gemacht aktuellen Stil eines Elements, aber in unserem Fall auch diese Methode nicht, denke ich.(einen Versuch wert)

Also, wie crescentfresh said, müssen Sie das Problem in Ihrer CSS-Positionierungsmethode zu finden, während Sie Ihre Zeit nicht für eine richtige Javascript-Funktion, die in der Lage sein könnte, die Magie zu verschwenden. Beginnen wir damit, dass wir #content DIV entfernen und die #main als einzigen Wrapper der genannten Spalten definieren und dann die Formatierung beibehalten, um das gewünschte Ziel zu erreichen.

Answer 2

Artarad,
Der obige Stil, d. H. Css zeigt, dass Sie keine Höhe zugewiesen haben. Bitte versuchen Sie _height: Auto in der Klasse, die wie

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

Grundsätzlich nicht aussehen viele Browser die Höhe erkennen, wenn zu einem bestimmten div oder einem Element zugeordnet. In diesem Fall verwenden wir die obigen Arbeitsumgebungen. Ich hoffe, dass das obige Ihnen hilft.

Danke,
Samiksha

Answer 3

Ich weiß nicht, ob es (ohne Prüfung) arbeiten, aber Sie könnten versuchen, jQuery und height(); dies (in der Theorie) gibt die berechnete Höhe an. Einen Versuch wert ...

Answer 4

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

Ein Element, das nicht tatsächlich Teil in dem Dokument macht Prozess nimmt keine Dimensionen hat, und gab eine offset/Höhe von 0.

Beide Prototypen getDimensions() und jQuerys height() lesen die offsetHeight oder clientHeight Eigenschaften, die Sie versucht haben und 0. So irgendwo in Ihrem Code muss etwas#col aus dem Rendering-Flow sein. Das ist alles, woran ich denken kann.

Answer 5

Da IE möchte, dass Sie eine harte Zeit geben, können Sie es einige besondere Aufmerksamkeit schenken und eine Eigenschaft, die ich es glauben, wird erkennen, ...

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

Ich weiß, dass dies eine alte Frage, aber ich fand eine bessere Antwort als "Fix das CSS und vergessen Sie das Javascript".

Ich hatte das Exast das gleiche Problem und .innerHeight() verwendet und es jQuery gezwungen, die Höhe zu berechnen. Aus irgendeinem Grund .outerHeight() hat nicht funktioniert, während .innerHeight() das Problem gelöst hat. Nicht sicher, ob es eine ähnliche Methode für den Prototyp gibt. Sie könnten in die jQuery-Bibliothek schauen und herausfinden, wie .innerHeight() funktioniert, und schreiben Sie Ihre eigenen.