Bittersweet Life: height 100% 높이의 레이아웃잡기

오랜만에 Markup을 할 일이 있어 HTML과 CSS를 다루는데 Javascript로 구현 했던 레이아웃을 정말 단순히 HTML과 CSS로 구현 하려니깐 공수가 장난이 아니었다. 하지만 인터넷에 수많은 고수분들이 잘 정리 해준 덕분에 잘 조합해서 구현했다.

사전 조건

DOCTYPE을 사용 할 것

IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래 와 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위와 같이 HTML Page에 첫번째로 선언하면 기본적인 BoxModel Problem을 해결 할수 있다.

다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다.

첫 번째 조건

높이가 100%인 div 영역

height: 100%;

보통 div element에 위와 속성을 주면 안된다 ㅡㅡㅋ

원인을 찾아 보니깐 저 조건이 되기위해서는 parent element의 height의 영향을 받기 때문이다.

그래서 해결책은 다음과 같다.

html, body {

height: 100%;

}

위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.

두 번째 조건

header(헤더) 와 footer(푸터) 영역 잡기

헤더는 상단에 붙어 있어야 하고 푸터는 하단에 붙어 있어야 한다. 가운데 영역만 크기에 따라 늘어나고 줄어든다.

container(컨테이너)가 min-height 100% 속성을 갖게 되면 나머지 헤더와 푸터 영역 만큼 스크롤이 생기는데 이를 막기 위해 마이너스 margin을 사용한다. 헤더와 푸터 영역 만큼 마이너스 margin값을 주면 스크롤은 사라진다. 그리고 헤더는 아래 나온 element들 보다 위에 보여야 되기 때문에 position속성에 relative 값을 할당하고 z-index에 값을 할당한다.

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}
#footer {
height: 50px;
background: #ddd;
}

IE에서는 min-heigth 속성을 지원하지 않는다. 이를 해결하기 위해 height 속성에 100%를 주면 IE는 min-height와 같은 역할을 한다.

/* IE Hack */
*html #container {
height: 100%;
}

세 번째 조건

컨텐츠 영역이 헤더와 푸터에 가려진다. 보통 이런 경우 padding 속성을 활용한다. padding을 이용하면 컨텐츠가 보이는 영역을 재 설정을 할수 있기 때문에 헤더와 푸터 영역만큰 padding 값을 contents-box영역에 준다.

.contents-box {
padding: 100px 0 50px 0;
}

네 번째 조건

가변 2단 구조를 하기 위해서 block element인 div에 float 속성을 줘서 해결한다.

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

float 속성은 다음에 나오는 모든 element에 계속 영향을 준다. 이를 끊어주는 element를 넣어서 float를 clear한다.

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}

Full Source Code

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/default.css" />
<title>높이 100% 가변 2단 페이지</title>
</head>
<body>
<div id="wrap">

<div id="header">Header</div>


<div id="container">
<div class="contents-box">
<div class="snb">Left</div>
<div class="contents">Right</div>
<div class="clear"></div>
</div>
</div>


<div id="footer">Footer</div>

</div>
</body>
</html>

CSS Code

/**
* @author niceilm
*/

/* Type Selector */
* {
margin: 0;
padding: 0;
font-style: normal;
font-family: 굴림, Gulim, 돋움, Dotum, AppleGothic, Sans-serif;
}

img, fieldset {
border: none;
}

hr, legend {
display：none;
}

li {
list-style: none;
}

a {
}

a:visited {
}

a:hover, a:active, a:focus {
}

html:first-child select {
padding-right: 6px;
height: 20px;
} /* Opera Fix */
option, x:-moz-any-link {
padding-right: 4px;
} /* Firefox Fix */
option, x:-moz-any-link, x:default {
padding-right: 0;
} /* Firefox Fix */

/* Layout Selector */
html, body {
height: 100%;
}

#wrap {
height: 100%;
width: auto;
}

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}

/* IE Hack */
*html #container {
height: 100%;
}

#footer {
height: 50px;
background: #ddd;
}

.contents-box {
padding: 100px 0 50px 0;
}

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}