<!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" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Markup by 윤선상" />
<title>header와 footer의 높이값을 100%로 설정하는 방법</title>
<style type="text/css">
html, body {margin:0; padding:0; height:100%; font-family:"맑은 고딕", malgun;} /* font-family가 빠지면 Opera에서 제대로 나오지 않습니다. */
body {background:#000000; font-size:0.75em; color:#666;}
#container {position:relative; width:100%; background:#ffffff; height:auto !important; height:100%; min-height:100%;} /* height:auto !importnat가 빠지면 IE7, IE8, FF, OP, SF, CR에서 문제가 생깁니다. */
#header {padding:1em; background:#ddd; border-bottom:1px solid #000000;}
#header h1 {font-size:2em; color:#000000;}
#content {padding:1em 1em 80px 1em;}
#content h2 {font-size:1.5em;}
#content strong {color:#ff0000;}
#footer {position:absolute; width:100%; bottom:0; background:#ddd; border-top:1px solid #000000;}
#footer p {padding:1em; margin:0;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>header와 footer의 높이값을 100%로 설정하는 방법 (v.2009.12.09)</h1>
</div>
<div id="content">
<h2>본문</h2>
<p>
height:100%<br />
혹시나 궁금해 하시는 분들이 계실 것 같아 만들어 올려봅니다.<br />
조금이나마 도움이 되었으면 좋겠네요^^<br /><br />
<strong>테스트 결과 IE6, 7, 8, FF, OP, SF, CR에서 모두 동일한 화면을 얻을 수 있었습니다.</strong><br /><br />
퍼블리셔들이여~ 영원하라~!
</p>
</div>
<div id="footer">
<p>(C) yoon.s.s | hack이 사라지는 그 날이 하루 빨리 오기를...</p>
</div>
</div>
</body>
</html>
'Tip' 카테고리의 다른 글
| javascript:void(0) 이게 뭔가? (0) | 2016.11.16 |
|---|---|
| 톰캣 오류시 체크 (0) | 2015.03.13 |
| "런타임 오류가 발생했습니다. 디버그하시겠습니까? (0) | 2014.11.13 |