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

【问题标题】：CSS - Set parent's height to 0 but child div still showCSS - 将父级的高度设置为 0，但子级 div 仍然显示
【发布时间】：2018-06-07 05:55:38
【问题描述】：

我想做一个简单的动画来显示和隐藏一个组件。

#parent {
  height: 0px;
}

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

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

这里有什么问题，我做错了什么？非常感谢。

【问题讨论】：

【解决方案1】：

为父对象添加溢出隐藏属性。这样溢出就会被剪掉，其余的内容将不可见（在主题情况下，高度为 0，因此剩余的也将为 0）。

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

【讨论】：

谢谢！简单而有效。我可以再问一些吗？这样子子还在消耗页面空间，如何让它不消耗空间呢？
能不能给个plunker链接或者截图
谢谢你，有了这个小提琴：jsfiddle.net/v6way9vo 它按预期工作。因此，也许我面临的问题与 Angular2 无法按预期工作有关。无论如何，非常感谢。
在这个 Angular 2 Plunker 中，embed.plnkr.co/BxT8SKBq8JwuPP16FDu4。我想切换隐藏和显示组件，但似乎它没有按预期工作？你知道原因吗？提前谢谢你。

【解决方案2】：

添加overflow: hidden后，在子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>

【讨论】：