티스토리 뷰

반응형

웹 브라우저의 높이에 따라 본문의 내용을 늘리고 싶은 경우가 종종 있을 수 있습니다. 

이런 경우, 먼저 브라우저의 높이를 가져올 수 있어야 하구요. 

이어서 동적으로 특정 영역의 높이를 지정할 수 있어야 합니다. 


브라우저 높이 가져오기

브라우저의 높이를 가져오는 것은 다음과 같이 매우 간단합니다. 


alert(document.body.scrollHeight);


이 값을 기반으로 하단의 영역을 빼고 본문 영역의 높이를 지정하면 되겠죠. 

참고로 브라우저의 높이와 관련된 자바스크립트 코드를 정리해 봅니다. 



동적으로 높이 지정하기

JQeury를 사용해서 다음과 같이 동적으로 높이를 지정할 수 있습니다. 

css 메소드에 height 값을 설정하는 형태로 했습니다. (바로 height 메소드를 사용할 수도 있습니다.)



이렇게 하면 문서가 로딩될 때 wrap 부분의 영역이 아래로부터 40px 윗부분까지 차지하게 되는 것이죠. 

다만, 이런 방식이 IE에서는 적용이 안되네요.. ㅠㅠ



반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함