브라우져 화면의 100% 높이를 유지하는 레이아웃

    1. 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다.
    2. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다.
    3. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니다. (주석같이 보이는 부분)
    4. #head 의 높이와 #foot 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다.

    예시

    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <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>
    <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>
    관련링크
    100% Height Layout Using CSS
    Posted by 부니기