CSS를 이용한 XHTML1 strict 모드의 height100%
Publisher/CSS / 2008. 4. 8. 23:35
XHTML 1.0 에서 쿽스모드가 아닌 일반 Strict나 trasitional 모드에서 Height 100%를 CSS만으로 구현하기가 상당히 까다롭다.
그래서 구글신에게 물어봤다.
아는 분들은 알겠지만... 아래 방법들을 사용하면 되나 #body영역에 iframe이 들어간다면 iframe의 높이가 100%일때 처리되지 않는 단점이 있다.
[sample1]
[sample2]
[sample3]
[sample4]
그래서 구글신에게 물어봤다.
아는 분들은 알겠지만... 아래 방법들을 사용하면 되나 #body영역에 iframe이 들어간다면 iframe의 높이가 100%일때 처리되지 않는 단점이 있다.
[sample1]
invalid-file<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#content-area {
padding: 100px 0 50px;
}
#foot {
height: 50px;
background: #ddd;
}
</style>
</head>
<body>
<div id="head">
요건 100px 높이 헤드
</div>
<div id="body">
<div id="content-area">
<p>컨텐츠 영역 1</p>
<p>컨텐츠 영역 2</p>
<p>컨텐츠 영역 3</p>
<p>(계속 추가해서 테스트 가능)</p>
</div>
</div>
<div id="foot">
요건 50px 높이 풋
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#content-area {
padding: 100px 0 50px;
}
#foot {
height: 50px;
background: #ddd;
}
</style>
</head>
<body>
<div id="head">
요건 100px 높이 헤드
</div>
<div id="body">
<div id="content-area">
<p>컨텐츠 영역 1</p>
<p>컨텐츠 영역 2</p>
<p>컨텐츠 영역 3</p>
<p>(계속 추가해서 테스트 가능)</p>
</div>
</div>
<div id="foot">
요건 50px 높이 풋
</div>
</body>
</html>
[sample2]
<!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" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
height:50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
헤더
</div>
<div id="content">
컨텐츠
</div>
<div id="footer">
푸터
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
height:50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
헤더
</div>
<div id="content">
컨텐츠
</div>
<div id="footer">
푸터
</div>
</div>
</body>
</html>
[sample3]
html,body {margin:0;padding:0;height:100%; /* 100 % height */}html>body #wrap {height:100%;} /* 100 % height */#header {width:100%;height:5em;}html>body #header {position:fixed;z-index:10; /* Prevent certain problems with form controls */}html>body #content-wrap {height:100%;} /* 100 % height */html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */#footer {width:100%;height:5em;}html>body #footer {position:fixed;bottom:0;z-index:10; /* Prevent certain problems with form controls */}
[sample4]
html,body {margin:0;padding:0;height:100%; /* 100 % height */}html>body #wrap {height:100%;} /* 100 % height */#wrap {width:40em;margin:0 auto;}#header {width:40em;height:5em;}html>body #header {position:fixed;z-index:10; /* Prevent certain problems with form controls */}html>body #content-wrap {height:100%;} /* 100 % height */html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */#footer {width:40em;height:5em;}html>body #footer {position:fixed;bottom:0;z-index:10; /* Prevent certain problems with form controls */}
'Publisher > CSS' 카테고리의 다른 글
| 웹폰트로 이쁜 웹페이지를 꾸며보자 (4) | 2008.07.23 |
|---|---|
| CSS 2.0 표준 Reference (0) | 2008.04.15 |
| CSS와 SVG를 fisheye 애니메이션 (0) | 2008.04.02 |
| IE6,IE7 ,FireFox 에 대해 CSS 맞추기 (0) | 2008.03.11 |
| IE에서 empty-cells 적용하기 (0) | 2008.02.15 |