[CSS] min-height, height 핵(hack)없이 사용하기

UI 코드작성은 정말 힘들다..ㅡㅡ;

출처 : http://blog.naver.com/weiss/130100739719

보통 min-height를 쓸땐, ie6에서 작용하지 않으므로, 기존엔 ie에서만 먹는 _height를 사용했다.

하지만 핵을 쓰는 것때문에 Validator에 걸림.

소스는 좀 길어지지만 핵 안쓰고, 모든 브라우저에서 정상적으로 작동하게 할 수 있는 방법

 

div {
  min-height:500px;
  height:auto !important;
  height:500px;
}

 

순서 매우 중요

1. min-height :  ie7이상 및 표준브라우저에서 작용.
2. height:auto !important : 표준브라우저에서 아래 height 속성을 무시하고 min-height이상인 컨텐츠가 컨텐츠 영역을 벗어날 때, div가 자동으로 늘어날 수 있도록 함.
3. height : ie6이하 버젼에서 작용. 셀렉터 안에서 같은 속성을 여러번 작성했을 경우 ie6은 가장 마지막에 선언한 속성을 가져가므로 맨 마지막에 적는다.

 

관련페이지

Min-Height Fast Hack (http://www.dustindiaz.com/min-height-fast-hack/) - 영문

 

참고페이지

Min-Height Fast Hack (http://mkyoon.com/71) - 한글