html - 分区高度 : 0px not working in ionic.

标签 html css ionic-framework sass

我正在使用 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;
      }
    }

最佳答案

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

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

关于html - 分区高度 : 0px not working in ionic.,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48701701/

相关文章:

html - Bootstrap 在主机上失控

ios - ionic 3 响应状态为 : 0 for URL: null

html - 如何使 flexbox 子行居中?

html - 在 Django 的 css 文件中加载静态文件

javascript - CSS 只在鼠标悬停时加载,为什么?

c# - WPF 和外部 CSS 文件

html - 如何在 html 和 css 中创建一个 7 字符下划线输入文本字段(附截图)?

javascript - css 不是第一次应用,而是第二次应用

android - 使用 native 视频播放器在 Android 上全屏播放视频

html - 图像的多种背景颜色