살아 숨 쉬는 웹 - 블루비 :: 하단 고정 레이어 스타일(CSS) 따라하기

Ray Of Light for TT - darklight ver.1.1(사용자 수정본) 의 스킨을 보시면 하단에 메뉴 레이어가
위치하고 스크롤이 되어도 위치가 고정되어 있습니다.

이와 같은 하단에 고정된 레이어를 사용하고자 하시는 분들을 위해 샘플소스를 만들어 봤습니다.
꼭 하단에만 위치할 필요는 없죠.. 소스를 고치면 상단 고정도 가능합니다.

샘플보기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title> new document </title>
<style type='text/css'>
* {
margin:0;
padding:0;
}

html {
height:100%;
width:100%;
overflow:hidden;
}

body {
margin:0;
padding:0;
}

#header {
color:#fff;
position:absolute;
bottom:0pt;
height:50px;
background-color:#000;
width:90%;
z-index:99;
}
#body {
width:100%;
position:absolute;
height:100%;
overflow-y:scroll;
}
</style>
</head>

<body>
<div id='header'>
하단 고정 레이어
</div>

<div id='body'>
<div style='height:400px;background-color:#660000;width:300px'>
</div>
<div style='height:400px;background-color:#FF6600;width:300px'>
</div>
<div style='height:400px;background-color:#00FF66;width:300px'>
</div>
</div>

</body>
</html>