CSS - 将父级的高度设置为0,但子级div仍然显示

Question

我想制作一个简单的动画来显示和隐藏组件.

#parent {
  height: 0px;
}

<div id="parent">
  <div id="child">This is some content</div>
</div>

当我将父div高度设置为0时,我希望子div也不可见,但是孩子仍然显示.当父高度设置为0时,我想让它消失.

这里有什么问题,我做错了什么？非常感谢你.

Answer 1

将溢出隐藏属性添加到父对象.这样会溢出溢出,其余内容将不可见(在主题情况下高度为0,因此剩余也将为0).

#parent {
  height: 0px;
  overflow: hidden;
}

Answer 2

overflow: hiddenchild中写的东西添加后DOM就会消失

#parent {
  height: 0px;
  overflow: hidden;
}

<div id="parent">
  <div id="child">
    This is some content..
    This is some content..
    This is some content..
  </div>
</div>