Css 离子滑盒100%高度不工作

我正在我的应用程序中使用离子滑盒。有时幻灯片内容的高度并不能填满整个内容。这意味着我在幻灯片底部有一个空白。在这种情况下，用户也应该能够滑动时，他也在底部空白空间。但是，由于离子载玻片的大小不是100%，因此这不起作用。 我也无法将大小设置为100%。我已经尝试了以下方法：

.slider{
  height:100%;
}

.slider-slide {
 height: 100%;
 min-height:100%;
} 

使用上述代码，幻灯片内容仍然不是100%。谢谢你的帮助。 这是幻灯片框的html：

<ion-content>
    <ion-slide-box class="slider" on-slide-changed="slideChanged($index, this)" show-pager="false" active-slide="1" ng-init="handleSlideEnabling()" does-continue="true">
        <ion-slide class="slider-slides" ng-repeat="question in questions">
            <div class="slider-slide">   
            ... some content
            </div>
        </ion-slide>
    </ion-slide-box>
</ion-content>

... 一些内容

这是一个黑客解决方案，但您可以创建一个带有100vh的自定义css容器，仅用于您知道将小于100vh的视图

.slider {
  height: 100%;
}
.slide-container {
  height: 100vh;
  // height: calc(100vh - 43px) if you have a header bar that is 43px tall
}

那么您的html可以如下所示

<ion-slide-box on-slide-changed="vm.slideHasChanged($index)">
  <ion-slide>
    <div class="slide-box">
      // Content that is less than 100vh
    </div>
  </ion-slide>
  <ion-slide>
      // Content that is more than 100vh
  </ion-slide>
</ion-slide-box>

//小于100vh的内容
//超过100vh的内容

我遇到了同样的问题，没有找到解决问题的好办法。 所以在尝试了一些东西之后，这是最有效的

编辑：

我的最后一个回答不是很好，因为它有一种令人讨厌的行为。 这将使所有幻灯片都具有相同的高度，因此，即使在某些幻灯片中没有可滚动的内容时，也可以滚动所有幻灯片

所以，这才是最适合我的

在my style.css中：

.slider {
  min-height: 100%;
  background-color: #eee;
}

ion-scroll.custom {
  height: 100vh !important;
  overflow: auto !important;
}

溢出：自动；因为我不希望滚动条指示器一直可见

html：

<ion-view view-title={{viewTitle}} cache-view="false">

  <ion-content>
    <ion-slide-box show-pager="true" on-slide-changed="slideHasChanged($index)">

      <ion-slide>
        <ion-scroll class="custom">
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
          <div><h1>FIRST</h1></div>
        </ion-scroll>

      </ion-slide>
      <ion-slide>
        <ion-scroll class="custom">
          <div><h1>SECOND</h1></div>
        </ion-scroll>

      </ion-slide>
      <ion-slide>
        <ion-scroll class="custom">
          <div><h1>THIRD</h1></div>
        </ion-scroll>
      </ion-slide>

    </ion-slide-box>
  </ion-content>

</ion-view>

第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第一
第二
第三

现在它尊重每张幻灯片的内容，使视图仅在内容溢出时才可滚动。

尝试添加以下css：

ion-content .scroll { height: 100%; }

---

为我工作：）

请添加你的html。我在你的html中看不到

。slider

也看不到

。slider slide

。@Chris：那是因为以后可以用html替换角度指令。我明白了，但问题与css有关，而不是特别的角度指令。所以我对预呈现标记不感兴趣。我需要查看提到的类。@Chris我更新了我的问题。请尝试解释更多内容。只有当内容从未超过整个视口高度时，这才有效。在我的幻灯片中，有时只有向下滚动才能看到内容。使用100vh将使此内容无法访问。

ion-content .scroll { height: 100%; }