Получение фактической высоты элемента с автоматическим увеличением в 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). поэтому с помощью рамки 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

В качестве завершения для ответа Марка; Там в равных по высоте Jquery (в) в Prototype:

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

И вот документы: http://prototypejs.org/api/element/getDimensions

Update: Я согласен с 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

Artarad,
Вышеупомянутый стиль i.e. css показывает, что вы не назначили высоту. Пожалуйста, попробуйте добавить _height: авто в классе, который будет выглядеть как

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

В принципе, многие браузеры не в состоянии признать высоту, присвоенное конкретному DIV или любого элемента. В этом случае мы используем описанные выше работы. Надеюсь, это поможет вам.

Спасибо,
Samiksha

Answer 3

Я не знаю, если он будет работать (без тестирования), но вы можете попробовать JQuery и height(); это (теоретически) дает вычисленную высоту. Стоит попробовать ...

Answer 4

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

элемента, который на самом деле не принимая участия в этом документе процесса не имеют размеров визуализации, и даст offsetWidth/Высоту 0.

Оба прототипа getDimensions() и jQuery's height() читают свойства offsetHeight или clientHeight, которые вы пробовали и получили 0. Так что где-то в вашем коде должно быть что-то взятие #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

Я знаю, что это старый вопрос, но я нашел лучший ответ, чем «Исправить css и забыть javascript».

У меня была такая же проблема, и я использовал .innerHeight(), и он заставил jQuery рассчитать высоту. По какой-то причине .outerHeight() не работал, а .innerHeight() решил проблему. Не уверен, есть ли аналогичный метод для прототипа. Вы можете заглянуть в библиотеку jQuery и выяснить, как работает .innerHeight(), и написать свой собственный.