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

Posted 2023-03-05

【中文标题】CSS - 将父级的高度设置为 0，但子级 div 仍然显示

【英文标题】：CSS - Set parent's height to 0 but child div still show

【发布时间】：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 时消失。

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

【问题讨论】：

设置溢出：隐藏到父容器。

你想让子组件在父组件的高度上增长吗？

@Adeebbasheer ：不是真的。我只想当父母身高为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>