로그인, 회원가입후 더 많은 혜택을 누리세요 회원가입 닫기

height:auto !important; height:100%;min-height:100%;

2012.11.06 18:28

조회 수:7130






{height:auto !important; height:100%;min-height:100%;}속성값을 이렇게 같이 써주는 이유는뭘까요?

height:auto !important;와 height:100%;의 차이점?

 

//------------------------------------------------

 

height:auto !important; height:100%;


이경우 앞에 적은 height속성만 적용 됩니다.

height:auto !important; height:100%;의 차이점은 속성의 값의 차이(100%와 auto)와 !important(속성의 우선순위)의 차이가 있습니다.

기본적으로 같은 블럭({})에서 속성이 중복될 경우 마지막에 적은 속성이 적용됩니다.
그런데 앞에 적은 속성이 !important가 적혀져 있으므로 뒤에 적은 속성이 무시됩니다.
!important는 인라인(style="")으로 적은 속성보다 우선으로 적용됩니다.
CSS우선순위는 관련 자료를 찾아보시면 충분히 이해 되실겁니다.

그리고 auto는 해당 앨리먼트가 dispaly:block이란 가정하에 자식 엘리먼트의 height만큼 적용이 됩니다.
100%는 앨리먼트의 상위(부모)앨리먼트의 height만큼 지정됩니다.

마지막으로 위 css는 다른 부분에서 덮어씌워 지지 않는 다면(이 css이후 해당 앨리먼트의 height속성을 !important 수순으로 우선수누이를 지정하지 않는다면)
{height:auto !important; height:100%;min-height:100%;}는
{height:auto !important; min-height:100%;} 또는 {height:auto; min-height:100%;} 또는 {min-height:100%;}과 동일한 기능을 합니다.