Publisher/CSS

Height 100% 2~3단 컨텐츠 레이아웃잡기

데꾸벅 2010. 7. 27. 19:43


기존 100% 레이아웃잡을때 중간에 들어가는 컨텐츠를 항상 height:100% 로 표시하여 header와 footer의 높이만큼 margin-top, margin-bottom 처리하는곳에서 착안하여 Flexible한 100% layout 을 표준모드로 구현해 보았다.

지원하는 Doctype
표준모드와 비표준모드에서 모두 테스트해본 결과 잘나온다.. ^^;

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


지원 브라우저
IE 5.5, 6,7,8,9  사파리 5.0 , 오페라 10.60, 파폭3.6 , 크롬5.0 에서 테스트 해본결과 잘나온다
01234567





2단 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    padding:0;
    margin:0
}

html,body{
height:100%;
}


#header{
position:absolute;
top:0;left:0;
width:100%;
height:70px;
background:gray;
overflow:hidden;
}

#footer {
position:relative;
clear:both;
height:50px;
background:green;
}


#container{
min-height:100%;
margin-left:200px;  /*왼쪽 영역 만큼 뛰기*/
background:blue;
margin-bottom:-50px;    /*푸터height만큼 마진값*/
}

* html #container{height:100%;} /* IE7 hack*/


    /*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/
    body {
        background:yellow;
    }
    #left {
     position:relative;
     width:200px;
     float:left;
     margin-left:-200px;
    }

    #headHeight{height:70px;}   /*컨텐츠영역 상단 보정(header height만큼 고정*/
    #footerHeight{clear:both;height:50px;width:100%;}   /*컨텐츠영역 하단 보정(footer height만큼 고정*/


    #content {
        position:relative;
        z-index:1;
    }

    /* IE3pixel 버그를 위한것 */
    * html #content {
        height:1%;
    }

</style>




</head>
<body>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>





3단소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    padding:0;
    margin:0
}

html,body{
color: #000;
height:100%;
}


#header{
position:absolute;
top:0;left:0;
width:100%;
height:70px;
background:gray;
overflow:hidden;
}

#footer {
position:relative;
clear:both;
height:50px;
background:green;
}


#container{
min-height:100%;
margin-left:200px;  /*왼쪽 영역 만큼 뛰기*/
margin-right:100px;
background:blue;
margin-bottom:-50px;    /*푸터height만큼 마진값*/
}

* html #container{height:100%;} /* IE7 hack*/

    /*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/
    body {
        background:yellow;
    }
    #left {
     position:relative;
     width:200px;
     float:left;
     margin-left:-200px;
    }
    * html #left {margin-right:-3px;padding-bottom:50px}
    * > html #left {padding-bottom:0}


    #right {
     position:relative;
     width:100px;
     float:right;
     margin-right:-100px;
    }


    #headHeight{height:70px;}   /*컨텐츠영역 상단 보정(header height만큼 고정*/
    #footerHeight{clear:both;height:50px;width:100%;}   /*컨텐츠영역 하단 보정(footer height만큼 고정*/


    #content {
        position:relative;
        z-index:1;
    }

    /* IE3pixel 버그를 위한것 */
    * html #content {
        height:1%;
    }


</style>




</head>
<body>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 오른쪽 s -->
    <div id="right">
        오른쪽<br />
        오른쪽<br />
        오른쪽<br />
    </div>
    <!-- 오른쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>



소스다운로드


참고적으로 위 방법은 쓸데없는 마크업이 많이 들어가는 이유로 개인적으로는 잘 쓰지 않는 방법입니다.
좀더 깔끔한 소스를 원하신다면..   신현석님의 "CSS절대 위치를 사용한 프레임효과" 를 참조하세요..








저작자표시 비영리 변경금지 (새창열림)