블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'CSS height 100% layout'에 해당되는 글 1건

  1. 2010.07.27 Height 100% 2~3단 컨텐츠 레이아웃잡기 (18)


기존 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절대 위치를 사용한 프레임효과" 를 참조하세요..








'Publisher > CSS' 카테고리의 다른 글

CSS3의 구조적인 가상선택자  (1) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.08.24 16:40  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2010.09.08 18:01 star  댓글주소  수정/삭제  댓글쓰기

    유용하게 잘쓰겠습니다~ 감사드려요~

  3. 2010.09.15 14:29 엽소  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다^^

  4. 2010.09.16 09:39 루시아  댓글주소  수정/삭제  댓글쓰기

    잘쓸게영~ 감사합니다

  5. 2010.09.16 14:10 joo  댓글주소  수정/삭제  댓글쓰기

    이것때문에 골치 아펐는뎅.. 감사합니다.

  6. 2010.10.13 17:15 MIN  댓글주소  수정/삭제  댓글쓰기

    감사합니다~ ^^

  7. 2010.11.14 01:15  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  8. 2010.12.24 10:27 구르는돌  댓글주소  수정/삭제  댓글쓰기

    좋은정보 정말 감사해요^^ 잘쓸게요^ㅇ^

  9. 2010.12.30 10:37  댓글주소  수정/삭제  댓글쓰기

    잘 보고 가용~

  10. 2011.01.03 17:58 신고 아이탱  댓글주소  수정/삭제  댓글쓰기

    새해 복 많이 받으세요 ^^ 잘보고 갑니다.

  11. 2011.02.10 13:53  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  12. 2011.03.16 17:15 미스미미  댓글주소  수정/삭제  댓글쓰기

    좋은정보감사드립니다~~잘쓸게요^^

  13. 2011.04.20 16:51  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 2011.04.25 17:01 신고 데꾸벅  댓글주소  수정/삭제

      그럴경우 IE6,7에서는 #left, #right에 padding-bottom:50px 정도로 해서 footerHeight와 같은 높이값을 주시면 됩니다.
      float된 box모델 버그때문에 그렇습니다.

  14. 2011.05.03 09:56 신고 금이아빠  댓글주소  수정/삭제  댓글쓰기

    yoo~
    감사합니다~^ㅡ^

  15. 2011.07.14 03:43 해동성  댓글주소  수정/삭제  댓글쓰기

    짜샤
    똥렬이랑 잘지내는거 같아 좋군... 니 잘지네냐
    하간 잘지네라

    • 2011.07.14 19:35 신고 데꾸벅  댓글주소  수정/삭제

      엉.. 해동성님.. 잘 지내십니까?
      요즘 경기도 어려운데 서울로 함 상경하시죠..
      근사한 저녁이라도.. ^^
      지금쯤이면 다니서던 회사를 접수하셨겠네요.. ^^

  16. 2014.03.18 23:32 위니  댓글주소  수정/삭제  댓글쓰기

    잘 봤습니다.
    제가 찾던 ui 인데, 여기서 content 부분의 offsetHeight 가 0 으로 잡혀서 결국 컨텐츠 영역이 100% 로 flexible하게 보여주는데는 무리가 있더군요.
    가령 content 에 image 를 높이 100% 로 보여주고 싶은데, content의 높이가 0 이므로 다르게 작동합니다.
    혹시 해결방법을 아신다면 공유 부탁드립니다.