2013-03-18 2 views
7

윈도우 크기에서 머리글과 바닥 글 값을 빼고 문서로드시이 값을이 값으로 설정하여 웹 페이지 콘텐츠의 높이를 동적으로 설정하려고합니다.jQuery outerHeight에서 올바른 값을 반환하지 않습니다.

각 함수 매개 변수는 요소 높이를 가져 오기 위해 요소 id를 사용합니다. 콘텐츠 매개 변수는 제외됩니다.

function setH(header, content, footer) 
{ 
    winH = top.innerHeight; 
    winTitle = 32; // height value of the window title (part of the header) 
    headH = $(header).outerHeight(true); 
    footH = $(footer).outerHeight(true); 
    contentH = winH - winTitle - headH - footH; 
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'}); 
} 

내가 겪고있는 문제는 outerHeight 값이 잘못된 값을 반환한다는 것입니다. 헤더는 23px와 바닥 글 40px를 반환합니다.

FF 및 Chrome의 요소를 검사 할 때 값은 25px 및 44px입니다.

innerHeight, outerHeight 및 outerHeight (true)를 사용했지만 올바른 값을 얻지 못했습니다.

무엇이 잘못 될지에 대한 제안 사항이 있습니까? 콘텐츠의 높이를 동적으로 설정하는 다른 방법이 있습니까? 머리카락이 빠져 나가서 도움을 얻을 수 있도록 노력하겠습니다.

편집 : iframe의 콘텐츠로 작업하고 있습니다. 다음 : winH = top.innerHeight은 최상위 iframe 창 높이 값을 가져옵니다.

+0

'톱'이란 무엇입니까? 그것이 무엇을 가지고 있나? 귀하의 레이아웃도 표시하십시오. – Starx

+0

iframe에 팝업 창이있는 맞춤 윈도우가 있습니다. top이 가장 큰 iframe 높이를 차지합니다. –

답변

1

screenwidth/height를 계산할 때 사용하는 스크립트를 수정했습니다. 이 작동하는 경우 참조 : 나를 $(window).load()에서 outerHeight()하지 $(document).ready()를 확인하는 코드를 삽입하는 것입니다 도움이되는 시도

if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth; 
     viewportheight = window.innerHeight; 
     winTitle = 32; 
     headH = $(header).outerHeight(true); 
     footH = $(footer).outerHeight(true); 
     contentH = viewportheight - winTitle - headH - footH; 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth; 
     viewportheight = document.documentElement.clientHeight; 
     winTitle = 32; 
     headH = $(header).outerHeight(true); 
     footH = $(footer).outerHeight(true); 
     contentH = viewportheight - winTitle - headH - footH; 
    } 

    // older versions of IE 

    else { 

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight; 
    } 
    document.getElementById("content id").style.height = contentH + "px"; 
+0

현재 코드에서 작동하도록 스크립트가 수정되었지만 반환되는 값은 원래 코드와 동일합니다. –

+0

머리글과 바닥 글이 동적입니까? 그렇지 않은 경우 .outerHeight (true)를 높이가 픽셀 인 픽셀로 바꿀 수 있습니다. – Jefferson

+0

그건 내 현재 해결하지만 가능한 동적으로 코드가 필요합니다. 그러므로 나는 값을 얻을 수 있어야합니다. –

15

한 가지를. 분명히 많은 경우에 $(document.ready()을 사용하는 것이 좋지만 때로는 outerHeight()의 잘못된 값이 요소가 완전히로드되지 않은 경우에 발생합니다.

+1

이미지를 포함하여 페이지의 모든 요소가 로딩되면'(window) .load()'가 추가되어야합니다. – Gavin

관련 문제