DIV 기본 높이 및 사용자 적응 높이

1394 단어

전환:


본고는 여러분과 DIV의 최소 높이와 DIV의 자체 적정 높이를 어떻게 제어하는지 중점적으로 토론하고자 합니다. 만약에 우리가div 높이를 설정해야 한다면 안의 물건이 이 높이를 초과할 때 이 용기를 자동으로 펼치게 합니다. 즉, DIV가 스스로 높이에 적응하도록 합니다.안의 정보가 매우 적을 때, 우리는 그것의 가장 작은 고정 높이를 설정한다.


DIV의 최소 높이와 DIV의 자체 적정 높이를 어떻게 제어하는지 우리는div 레이아웃을 사용할 때 자주 이런 상황을 만날 수 있다. 우리는 DIV 높이를 설정해야 한다. 안의 물건이 이 높이를 초과할 때 이 용기를 자동으로 펼치게 한다. 즉, DIV의 자체 적정 높이이다.안의 정보가 매우 적을 때, 우리는 그것의 가장 작은 고정 높이를 설정한다.IE6에서 하위 용기의 높이가 부모 용기를 초과할 때 부모 용기는 용기에 의해 벌어지기 때문에 Height의 높이 값을 직접 설정하면 된다는 것을 우리는 알고 있다.하지만 IE7과 Firefox에서는 안 돼요. 자동으로 벌어지지 않아요.DIV 자체 적응 높이를 설정하려면 Height:auto를 사용할 수 있습니다.이 속성;그러나 이 속성은 IE6도 지원하지 않는다.머리 아프죠?사실 이 문제를 해결하는 것은 어렵지 않을 뿐만 아니라 방법도 적지 않다. 여기서 하나를 추천한다. (우리가 제어해야 할 이 DIV의 최소 높이가 100px라고 가정하면 초과할 때 안의 정보를 자동으로 펼친다):
Html 코드
  • .div{   
  •     height:auto!important;   
  •     height:100px;   
  •     min-height:100px;   
  • }  
  • .div{ height:auto!important; height:100px; min-height:100px; }

     
    왜냐하면!important은 IE7과 Firefox에서 읽을 수 있고 뒤에 있는 Height:100px보다 무게가 높습니다.그래서 IE7과 Firefox가 나타날 때 앞에 있는 Height:auto를 사용합니다!important;IE6는 인식할 수 없습니다!important, auto는 그것에도 쓸모가 없기 때문에 뒤에 있는 Height:100px 스타일을 적용합니다.min-height:100px는 DIV의 최소 높이가 100px임을 나타낸다.이 속성은 IE7과 Firefox에서 모두 식별할 수 있습니다.이렇게 완벽한 것은 DIV의 최소 높이를 설정할 수 있고 DIV가 높이에 적응할 수 있는 css 양식이 나왔습니다. IE6, IE7과 Firefox를 동시에 호환합니다!

    좋은 웹페이지 즐겨찾기