웹 브라우저 크기에 따라 내용 부분을 자동으로 늘리기~

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

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

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

브라우저 높이 가져오기

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

alert(document.body.scrollHeight);

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

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

<script> document.writeln("브라우저의 전체 높이",screen.availHeight); document.writeln("브라우저의 전체 너비",screen.availWidth); document.writeln("모니터의 해상도 높이 ",screen.height); document.writeln("모니터의 해상도 너비 ",screen.width); document.writeln("브라우저안쪽의 높이 ",document.body.clientHeight); document.writeln("브라우저안쪽의 너비 ",document.body.clientWidth); document.writeln("문서 높이",document.body.scrollHeight); </script>

동적으로 높이 지정하기

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

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

<script> $(function () { $(document).ready(function() { var scroll_height = document.body.scrollHeight - 40; scroll_height = scroll_height + "px"; $("#wrap").css("height", scroll_height); }); }); </script>

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

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