2007년 8월 1일 수요일

div로 전체 페이지를 덮고 싶으나 덮지 못하는 경우...

웹에서 팝업창을 띄우는 경우에 팝업창을 돋보이게 하기 위해서 배경색을 깔아주는 경우가 있습니다.

브라우져의 전체 화면을 덮기 위해서 document.body의 scrollWidth나 scrollHeight 또는,
document.documentElement.clientWidth, clientHeight 등등의 여러 값들을 얻어와서 값을 구하게 되겠죠...

사용자 삽입 이미지

작업이 완성되었다 싶어서 반영하고 보니 버그가 금새 눈에 띄더군요. -_-;;;
좌절감에 확인해보니 body 바로 아래에 있는 div 태그에 폭과 높이의 값을 줘서 고정시켜버린 케이스였습니다.

사용자 삽입 이미지

정상적으로 보이기는 하는데.... -_-;;
달리 처리할 방법이 없네요.

※ 덮을 수 있는 방법이 있기 있습니다.
  • IE에서는 document.body.scrollHeight를 쓰고
  • IE이 외의 브라우져에서는 document.documentElement.offsetHeight
사용하면 현재의 HTML의 height이 리턴됩니다. (경우에 따라서는 실제 사이즈보다 더 차지 하는 것 같습니다.)

댓글 없음:

댓글 쓰기