블로그 이미지

카테고리

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

최근에 올라온 글

최근에 달린 댓글

XHTML 1.0 에서 쿽스모드가 아닌 일반 Strict나 trasitional 모드에서 Height 100%를 CSS만으로 구현하기가 상당히 까다롭다.
그래서 구글신에게 물어봤다.

아는 분들은 알겠지만... 아래 방법들을 사용하면 되나 #body영역에 iframe이 들어간다면 iframe의 높이가 100%일때 처리되지 않는 단점이 있다.

[sample1]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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>
</head>

<body>
<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>
</body>
</html>


[sample2]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
    height:50px;
}
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            헤더
        </div>

        <div id="content">
            컨텐츠
        </div>

        <div id="footer">
            푸터
        </div>
    </div>
</body>
</html>




[sample3]

  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #header {
  9. width:100%;
  10. height:5em;
  11. }
  12. html>body #header {
  13. position:fixed;
  14. z-index:10; /* Prevent certain problems with form controls */
  15. }
  16. html>body #content-wrap {height:100%;} /* 100 % height */
  17. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  18. #footer {
  19. width:100%;
  20. height:5em;
  21. }
  22. html>body #footer {
  23. position:fixed;
  24. bottom:0;
  25. z-index:10; /* Prevent certain problems with form controls */
  26. }

[sample4]




  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #wrap {
  9. width:40em;
  10. margin:0 auto;
  11. }
  12. #header {
  13. width:40em;
  14. height:5em;
  15. }
  16. html>body #header {
  17. position:fixed;
  18. z-index:10; /* Prevent certain problems with form controls */
  19. }
  20. html>body #content-wrap {height:100%;} /* 100 % height */
  21. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  22. #footer {
  23. width:40em;
  24. height:5em;
  25. }
  26. html>body #footer {
  27. position:fixed;
  28. bottom:0;
  29. z-index:10; /* Prevent certain problems with form controls */
  30. }





































Post by 넥스트리소프트 데꾸벅(techbug)
, |