CSS 높이(Height) 100% 맞추기(브라우저 창크기에 맞춰서)

높이 100% 첫번째 Hack을 사용한 100% 마추기

기본 소스

일단 DTD설정후 높이 100%라는것은 브라우저의 높이를 기준으로 하기때문에

container에 100%를 주면 전체 html의 높이는 gnb+ container + footer이 되어서 화면의 100%를 넘어선다 그럼 어떻게 잡아주는것이 좋을까?

먼저 DTD설정을 확인한다. (거의 필수)

본인은 DTD XHTML 1.0 Transitional 제작했다. (일단 많이 쓰이니깐..)

처음해줄것은 html과 body를 높이 100%를 주는것이다.

Element같은경우 최상위의 높이를 기준으로 삼기떄문에 최상위인 html과 body에 높이 100%를 설정해준다

html, body {height: 100%; margin: 0; padding:0; /* 뒤에 padding과 margin은 디자인상- _-넣은것 */}

그리고 container을 100%를 줘야 footer이 아래로 내려가기때문에 container에 100%를 준다

#container {min-height: 100% /* 최소 100%가 되어야하기때문에 min를 사용한다 */}

* html #container { height:100%; /* IE6 이하 버전은 height가 min-height를 의미한다. */}

자 이제는 100%의 중앙이 만들어졌을것이다. 하지만 이게 웬일인지 아래위가 생각보다 길다? 즉 화면을 넘어섰을것이다. 이유인즉 위쪽 gnb 높이와 아래쪽 footer의 높이때문인것이다.

그럼 어떻게 해야하나? 당연히 두개의 녀석의 높이를 쥐도 새도 모르게 감춰줘야할것이다.

그럼 이제부터 꼼수 아닌 꼼수가 들어간다

1. position을 사용하여 gnb를 공중에 띠워버린다. 그럼 높이값이 없는걸로 인식해서 container이 gnb의 높이 만큼 올라올것이다. 즉 ! gnb의 높이가 사라진다 !

#gnb {position: absolute; top:0;left:0; height: 100px; width: 100%; /* absolute된것은 높이와 넓이를가지지 않기떄문에 수동으로 기입을해야한다. */}

하지만 absolute를쓰면 간단하게 뛰우지만 나중에 relative를 사용하지 못할수도있다

그래서 그냥 해도 되기는 된다 -_-;

#gnb {height: 100px; width: 100%; }

위처럼 사용하면 absolute처럼 공중이 뜬상태가 아니게된다

그럼 어쩔수 없이 container를 음수 마진값으로 없애줘야한다

#container {min-height: 100% maring-top:-100px; /* 위쪽으로 top만큼 땅겨준다. */ }

자 이제 남은것은 footer 이녀석의 높이를 지워주는것이다.

2. footer의 경우 position을 사용할수없다 이유인즉 현재 화면의 높이를 잡는 녀석이라서 첫화면의 bootom을 잡기때문에 position을 사용할수 없다. 그럼 방법은???????????????

이것도 역시 음수 margin값을 주는것이다. 즉

#footer {height:100px; width: 100%; margin-top: -100px; /* footer높이만큼 마이너스 시켜준다 */}

자 그럼 footer의 높이가 사라진것이다 !

총 종합적으로 소스를 적어보면

  html, body{ height: 100%; margin:0; padding:0;    }
  #gnb {height: 100px;width: 100%; background: green;}
  #container {min-height: 100%;maring-top: -100px; background: red;}
   * html #container {height: 100%;}
  #footer {height: 100px;width: 100%;margin-top:-100px;background: blue;}

-->
</style>
</head>
<body>

<div id="gnb"></div>
<div id="container">
</div>
<div id="footer"></div>
</body>
</html>

자 이제 100% 완성이가 그럼 내용을 삽입해볼까???? ㅡ믄ㅇ름낭르

아래위가 잘릴것이다;; 그 이유는 ???

gnb와 footer녀석이 container을 덥고 있기 때문이다 그럼 어떻게 해줘야하나?

제일 간단한 방법은 container안에 하나의 div를 더만들어줘서 그만큼 padding값으로 밀어주는 방법이 있다.

#container #content {padding: 100px 0 ; /* padding-top과 padding-bottom에 100px의 여백주기 */}

자 그럼 최종 소스를 완성해볼까?

  html, body{ height: 100%; margin: 0; padding: 0;    }
  #gnb {height: 100px; width: 100%; background: green;}
  #container {min-height: 100%; maring-top: -100px; background: red;}
   * html #container {height: 100%;}

#container #content {padding: 100px 0 ; }
#footer {height: 100px; width: 100%; margin-top: -100px; background: blue;}

-->
</style>
</head>
<body>

<div id="gnb"></div>
<div id="container">

이제 100% 레이아웃이 완성되었다.

하지만 여기서 추후 확장시 container부분에서 left메뉴와 content가 float가 되었을때는 또 다른 문제가 발생한다 이것이 haslayout때문에 발생하는 문제인데 해결방법은 아래의 링크를 참조 하기 바란다.

----------- 아래 링크 ---------------

http://blog.wystan.net/2007/08/14/understanding-haslayout-property-and-holly-hack

높이 100% 두번째 Position을 이용한 마추기

position은 상위의 Element를 기준으로 영역을 잡는다 보통 상위에 Element를 감싸지 않을경우

최상위인 body를 기준으로 잡는다.

즉 일반적인 position: absolute; bottom:0;은 화면에 보이는 아래쪽을 삼기때문에 Content가 늘어나도 아래쪽으로 내려가지 않는다. 하지만 상위 Element를 넣어주면 문제는 해결되는것이다.

아래쪽은 기본소스이다.

</div>

위의 설명으로 척하면 척일것이다. 즉 container을 기준으로(relative) footer를 absolute를 잡는것이다.

그럼 container를 기준으로 하기때문에 content가 늘어나면 자연히 container의 아래쪽으로 가기때문에 중간에 올라가는 불상사는 막을수있다

그럼 전체 css를 작성해보자

<!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" lang="ko">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--

   html, body{
  height: 100%;
  margin:0;
  padding:0;
    }
    #container {min-height: 100%; position: relative;}
#container #header {background: green;height: 100px;}
#container #content {padding-bottom: 100px;}
    #container #footer {position: absolute;bottom:0;left:0; background: red;width: 100%;height: 100px;}

-->
</style>
</head>

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

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

</div>

</body>
</html>

div를 하나더 사용하냐 hack을 사용할꺼냐 따른건 사용자의 선택이라고 본다.

개인적으로는 포퍼먼스가 큰사이트 경우 depth가 하나더 늘어나는건 별로 효율성이 없다고 본다.

하지만 적은 포퍼먼스가 요구되는 사이트에서는 별문제가 없을것이다.

ps. 본 소스는 IE 6.0이상 FF 2.0 , Safari3.1버전에 테스트를 하였습니다. 그이하나 그이상테스트에 이상있을경우 코멘트 남겨주시면 수정하겠습니다