다음 지도 서비스를 사용하면 웹 브라우저 크기가 바뀔 때 마다 아래 그림처럼 지도 영역의 높이가 함께 변경되는 것을 알 수 있다.
위 그림에서 지도의 높이는 다음과 같다.
- 지도 영역의 높이 = 웹 브라우저 전체 높이 - 상단 메뉴 고정 높이
즉, 지도 영역의 높이는 상단 메뉴 높이를 뺀 나머지가 된다. 그런데, CSS에는 높이를 부모 태그에 대한 비율로 지정하는 방법만 있을 뿐, 일부 영역을 뺀 나머지 높이를 지정하는 방법은 존재하지 않는다. 그래서, 위 그림과 같이 특정 요소의 높이가 일부를 제외한 나머지 요소의 높이가 되도록 만들려면 다음과 같은 처리를 해 주어야 한다.
- 자바 스크립트 이벤트 처리
- 문서 로딩이나 윈도우 크기 변경 이벤트 발생시에, 해당 요소의 높이를 변경한다.
<!DOCTYPE html>
<html>
<head>
<title>가변 높이 처리</title>
<style>
#top{ height: 50px; background-color: #eee; }
#left { background-color: yellow; float: left; width: 100px; }
#content { background-color: red; margin-left: 100px; }
</style>
<body>
<div id="top">헤드 높이</div>
<div id="left">좌측 메뉴</div>
<div id="content">내용</div>
</body>
위 문서를 웹 브라우저로 보면 다음과 같이 left와 content 영역이 표시된다.
우리가 하려는 건, content 영역이 웹 브라우저의 나머지 높이를 차지하도록 만드는 것이다. 자바 스크립트를 이용하면, 간단하게 웹 브라우저의 크기에 따라 content 영역의 높이가 설정되도록 할 수 있다. 여기서는 jquery를 이용해서 크기를 변경해주는 코드를 작성해보았다.
<!DOCTYPE html>
<html>
<head>
<title>가변 높이 처리</title>
<style>
body { height: 100%; margin: 0 0 0 0;}
#top { height: 50px; background-color: #eee; }
#left { background-color: yellow; float: left; width: 100px; }
#content { background-color: red; margin-left: 100px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
resizeContent();
});
$(window).resize(function() {
resizeContent();
});
function resizeContent() {
var windowHeight = $(window).height();
var topHeight = $("#top").height();
$('#content').css({'height':(windowHeight-topHeight)+'px'});
}
</script>
<body>
<div id="top">헤드 높이</div>
<div id="left">좌측 메뉴</div>
<div id="content">내용</div>
</body>
위 코드에서 $(window).height()와 $("#top").height()는 각각 아래 그림과 같은 높이 값을 구해준다.
따라서, windowHeight - topHeight 는 전체 윈도우 높이에서 헤드 높이를 제외한 나머지 높이가 되며, 아래 코드를 실행하면 "#content" 영역은 나머지 만큼의 높이를 차지하게 된다.
$('#content').css({'height':(windowHeight-topHeight)+'px'});
resizeContent() 함수는 문서가 준비되거나 윈도우 크기가 변경될 때 마다 실행되므로, 최초 문서 로딩이 완료되면 내용 부분이 나머지 높이를 차지하게 된다. 실제로 실행해보면 아래 그림과 같이 내용 부분이 나머지 높이를 차지하는 것을 확인할 수 있다.
