신일석의 愉.食.動

IE6에서 블록의 높이 100% 사용하기 본문

tip tech

IE6에서 블록의 높이 100% 사용하기

액션신 actionshin 2007. 11. 19. 06:21
IE7이나 FF2에서는 블록의 높이 100%의 사용이 가능하다.
예를 들면
내용

그러나 IE6의 경우는 블록의 높이가 100%로 유지되지 않는데 이때는 다음과 같은 방법을 사용하면 된다.

관련 예제 블로그
http://hyeonseok.com/pmwiki/index.php/Css/Height

주요내용



  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 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다.


작업예


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Untitled Document







컨텐츠 영역 1


컨텐츠 영역 2


컨텐츠 영역 3


(계속 추가해서 테스트 가능)






Tag
0 Comments
댓글쓰기 폼