Question

我正在研究一个离子项目，我正试图崩溃一个充满内容的div。我想给div高度为零，当你单击一个按钮时，div会展开，并显示其自动高度及其所有内容。出于某种原因，给我的div高度为0不起作用。谁能告诉我为什么？ .flexFill是我要崩溃的那个。并且显示：没有什么都不做，因为那时我只剩下一大盒白色空间而不是倒塌的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;
}

Div高度：0px不适用于离子。

1 个答案: