본문 바로가기

webdesign/CSS

보더처리된 넓이 100%, 높이 100% 팝업 또는 레이어

<!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=utf-8" />
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#layer {
min-height: 100%;
margin: -5px 0 -5px;
}
* html #layer {
height: 100%;
}
#content-area {
padding: 5px 0 5px;
}
</style>
</head>

<body>
<div id="head" style="height:5px; background-color:#ff0000;font-size:1px;">.</div>
<div id="layer" style="border-right:solid 5px #ff0000; border-left:solid 5px #ff0000;">
<div id="content-area">
<p>컨텐츠 영역 1</p>
<p>컨텐츠 영역 2</p>
<p>컨텐츠 영역 3</p>
<p>(계속 추가해서 테스트 가능)</p>
</div>
</div>
<div id="foot" style="height:5px; background-color:#ff0000;font-size:1px;">.</div>
</body>
</html>