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 x 96 픽셀)에 자신의 컨테이너 요소의 높이를 설정합니다. 그래서 프로토 타입 프레임 워크를 사용하여 :

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

그것은 파이어 폭스, 오페라, 사파리 & 크롬에서 좋은 일이지만 컬럼의 실제 높이를 반환하지. 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에 동의합니다. 과거에는 절대적으로 동일한 문제가 있었기 때문에 가능한 모든 메서드를 검색하여 차원 속성을 찾았지 만 실패했습니다. 이에서 봐 주시기 바랍니다 : 보시다시피

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가 요소의 계산 렌더링 현재 스타일을 얻을 수 있지만, 우리의 경우에도이 방법이 실패 할 것 같아요.(시도해 볼만한 가치)

따라서 초승달 모양의 said처럼 CSS 기능을 사용하면 문제를 찾아 내면서 마술을 할 수있는 적절한 자바 스크립트 기능을 찾기 위해 시간을 낭비하지 않아도됩니다. #content DIV를 제거하고 #main을 상기 열의 유일한 래퍼로 놓은 다음 원하는 목표를 달성하기 위해 나머지 스타일을 지정하십시오.

Answer 2

Artarad,
위의 스타일 즉, 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

에서 : 실제로 더 차원이 없습니다 과정을 렌더링 문서에 참여하지 않고,의 의 offsetWidth/높이를 줄 것이다 Why would jquery return 0 for an offsetHeight when firebug says it's 34?

의 요소 0

Prototype의 getDimensions()과 jQuery의 height()은 offsetHeight 또는 clientHeight 속성을 읽었습니다. 시도 했으므로 0이었습니다. 그래서 어딘가에 귀하의 코드에 뭔가가#col 렌더링 흐름 밖으로 데리고 있어야합니다. 그게 내가 생각할 수있는 전부 야. IE는 당신에게 힘든 시간을주고 싶어하기 때문에

Answer 5

, 당신은 몇 가지 특별한주의를주고 내가 그것을 인식 믿는 속성을 사용하여 ...

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 수정 및 자바 스크립트 잊어 버리기"보다 나은 답변을 찾았습니다.

나는 동일한 문제가 있었고 .innerHeight()을 사용했으며 jQuery가 높이를 계산하도록 강제했다. 어떤 이유에서든 .outerHeight()은 .innerHeight()이 문제를 해결하는 동안 작동하지 않았습니다. 프로토 타입과 비슷한 방법이 있는지 확실하지 않습니다. jQuery 라이브러리를 살펴보고 .innerHeight()이 어떻게 작동하는지 파악하고 직접 작성할 수 있습니다.