절대 div에서 CSS 전환 폭과 높이가 0이되지 않습니다.

Question

제 목적은 div를 너비와 높이 0으로 전환하여 점차 사용자에게 보이지 않게 만드는 것입니다. 나는 다음과 같은 절대 위치 DIV있다 : 사용자 프레스 가까이 DIV에, 나는 "주"에 연결하면

이

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div> 

는 다음 CSS 클래스를 div에를 :

.collapseRecommendation { 


-webkit-transition: all 1.0s ease-in-out; 
    -moz-transition: all 1.0s ease-in-out; 
    -o-transition: all 1.0s ease-in-out; 
    transition: all 1.0s ease-in-out; 
} 

와 자바 스크립트의

(에 extjs)

mainDiv.setStyle('width', '0px'); 
mainDiv.setStyle('height', '0px'); 

을하고 또한 예상대로 작업을 수행하는 "기본"DIV 다른 왼쪽 상단 위치를 설정 : 코드는 0에 사업부의 폭과 높이를 설정합니다.

"main"div 높이와 너비 만 0으로 설정되어 있지만 내부 div 크기는 변경되지 않고 같은 위치에 있으며 사용자가 볼 수 있으므로 전환 후 나는 다음을 갖습니다.

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div> 

내부 div는 여전히 크기가 200x150입니다. 크기가되지 않은 이유는 무엇일까요? 감사합니다.

Answer 1

하위 div의 크기가 변경 될 것으로 예상해서는 안됩니까?

div과 같은 요소를 차단할 때 대부분의 브라우저는 블록 요소를 width: 100%으로 설정했기 때문에 폭이 부모의 너비에만 의존합니다. 그러나 명시 적으로 스타일을 설정하면이 처리가 무시되고 치수가 완전히 독립적으로 작동합니다.

This JSFiddle은 너비를 지정하거나 지정하지 않을 때 중첩 된 동작을 나타냅니다. div를 클릭하면 크기가 조정 된 것을 볼 수 있습니다. 상단 div는 독립적으로 크기를 조정합니다. 하단 div는 동일한 너비를 유지합니다. 다시 말하지만 너비가 명시 적으로 선언되지 않았기 때문입니다.

해결 방법은 각 자식 div의 프로그래밍 방식으로 크기를 변경하는 것입니다. 이렇게하기 위해, 당신은 단지 아이들을 통해 반복하고 모든 차원을 설정할 수 있습니다. 코드는 다음과 유사 할 수 있습니다.

var children = mainDiv.childNodes; 
for(i = 0; i < children.length; i++) { 
    if (children[i].nodeType == 1) { 
    // Do something with children[i] 
    } 
}