父 DIV 高度：0px 但子元素仍显示答案

【问题标题】：Parent DIV height:0px but child element still shows父 DIV 高度：0px 但子元素仍显示
【发布时间】：2019-01-05 11:02:01
【问题描述】：

在寻找实现导航栏下拉菜单（类似于手风琴）的方法时，我遇到了this youtube video，它使用自定义组件并操纵 card-content 元素的max-height 来实现所需效果。

HTML：

<ion-card>
  <ion-card-title text-center color="primary" (click)="toggle()"></ion-card-title>
  <ion-card-content #cc>
    <p>Hello World!</p>
  </ion-card-content>
</ion-card>

CSS：

.card-content{
  max-height: 0px;
}

TS：

toggled = false;
@ViewChild("cc") cc: any;

toggle() {
  if (this.toggled) {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "0px");
  } else {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "500px");
  }
  this.toggled = !this.toggled;
}

从头到尾观看视频时一切正常。但是我想要的是导航栏的下拉菜单，所以我决定将他的部分代码编辑为...

#cc{
    max-height: 0px;
}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

但它没有按预期工作。当 div 为 (0px) 时，我仍然可以看到它包含的元素，在这种情况下它是“Hello World！”

我在这里做错了什么，还是它只适用于离子卡？

【问题讨论】：

标签： html css angular ionic-framework ionic3

【解决方案1】：

只需将overflow: hidden; 添加到父级：

#cc{
    max-height: 0px;
    overflow: hidden;
}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

【讨论】：

【解决方案2】：

使用overflow: hidden;

#cc{
    max-height: 0px;
    overflow: hidden;
}

<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

【讨论】：