css在绝对div上将宽度和高度转换为0不起作用

Question

我的目的是将div转换为宽度和高度0，从而逐渐使其对用户不可见。 我有以下绝对定位的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>

当用户按下close div时，我将以下css类附加到“ main” 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;
}

并在javascript（extjs）代码中将div的宽度和高度设置为0：

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

并且我还设置了“ main” div的左和顶部位置，这确实按预期工作。

但是，只有“主” 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%将其设置为width: 100% 。 但是，当您显式设置样式时，此处理将被覆盖，并且它们的尺寸彼此完全独立。

这个JSFiddle显示了当您指定和不指定嵌套div的宽度时嵌套div的行为。 如果单击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]
  }
}