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

есть столбцы, как вы видите, и я хочу установить высоту их элемента контейнера на максимальный размер обоих столбцов (плюс 130 пикселей). Итак, используя 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

Это хорошо работает в 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;
}

Есть идеи по этому вопросу, пожалуйста?!

обновление / Это заняло три дня, чтобы решить, и я был очень рискна получить награду!
для решения, пожалуйста, взгляните на этот вопрос / ответ .

Answer 1

Как завершение ответа Марка; В прототипе есть равенство height () в jQuery:

$('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 единственной обертки для указанных столбцов, а затем стилизации оставшихся элементов для достижения желаемой цели.

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

От: Почему jquery возвращает 0 для offsetHeight, когда firebug говорит, что это 34?

Элемент, который на самом деле не принимает участие в процессе визуализации документа не имеет размеров, и даст offsetWidth / Height of 0.

И Prototype getDimensions(), и jQuery height() читают свойства offsetHeight или clientHeight, которые вы пробовали и получили 0. Так что где-то в вашем коде должно быть что-то , принимающее #col вне потока рендеринга. Это все, что я могу придумать.

Answer 4

Я знаю, что это старый вопрос, но я нашел лучший ответ, чем "Исправить CSS и забыть JavaScript".

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

Answer 5

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

Answer 6

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