div 高度：0px 在离子中不起作用。

Question

我正在处理一个 ionic 项目，我正在尝试折叠一个充满内容的 div。我想给 div 的高度为零，当您单击按钮时，div 会展开并显示其所有内容的自动高度。出于某种原因，给我的 div 高度为 0 是行不通的。谁能告诉我为什么？ .flexFill 是我要折叠的那个。和 display: none 什么都不做，因为那时我只剩下一大盒空白而不是折叠的 div。

  .grid.shipments {
    border: 2px solid $list-border-color;
    padding: 0;
    .flexStatic .row {
      border-bottom: 2px solid $list-border-color;
    }
    .flexFill {
      overflow-y: scroll;
      padding-top: 10px;
      padding-bottom: 10px;
      height: 0px !important;
    }

    .filter {
      font-size: 20px;
      span {
        display: inline-block;
        padding: 5px 10px;
        color: white;
        border: 1px solid; 
        margin-top: 5px;
      }
      p {
        font-weight: normal;
        font-size: 14px;
      }
    }

Answer 1

您还应该设置padding: 0 和overflow:hidden;，因为虽然高度为零，但填充仍然占位。见以下代码：

.flexFill {
  overflow-y: scroll;
  height: 0px !important;
  padding:0;
}