하단 고정 레이어 스타일(CSS) 따라하기

by 조쉬 posted Dec 22, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
<!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>