html에 DOCTYPE 사용 시 브라우저 리사이징 처리 팁

과거 회사 게시판에 올렸던 글인데 이번에 찾을 일이 있어서 블로그에 포시팅 해 둔다.

===========================================================================================

이번에 개발할 때 페이지에 DOCTYPE을 선언하여 개발하는데
기존에 DOCTYPE없을 때 개발했던 프레임구조(상하단으로 구분하고 하단프레임의 좌측에
div로 tree메뉴를 표현, 전체에는 iframe으로 업무화면을 표현. 좌측 트리메뉴를 숨길 수 있도록
구성하여 iframe의 업무화면이 동적으로 사이징 처리됨.)를 그대로 가져와서 화면을 구성했을 때 이상하게
리사이징을 하면 iframe이 윈도우의 height를 제대로 읽어오지 못하는 현상이 발생했습니다.

방식은 window.onresize 이벤트를 캐치해서
iframe.style.height = document.body.scrollHeight+"px";로
읽어오도록 했었죠

JavaScript의 스크롤된 위치를 알아오기 위해서 document.body.scrollTop을 사용함.

그런데, 상단에 DOCTYPE이 선언된 경우
(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...)

document.body.scrollTop의 값이 항상 0으로 출력된다.

이때는 document.documentElement.scrollTop으로 바꾸어 사용해야 한다.

결론 : body -> documentElement