离子滑块中的 100% 高度不起作用答案

【问题标题】：100% height in ion-slide-box not working离子滑块中的 100% 高度不起作用
【发布时间】：2017-11-27 18:30:59
【问题描述】：

我在我的应用程序中使用了 ion-slide-box。有时，幻灯片内容的高度不会填满整个内容。这意味着我在幻灯片底部有一个空白区域。在这种情况下，用户也应该能够在滑动底部的空白区域时滑动。但是，这不起作用，因为离子载玻片的大小不是 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>

【问题讨论】：

请添加您的 html。
我在你的 html 中没有看到 .slider 和 .slider-slide...
@Chris：那是因为以后可以用 html 替换 angular 指令。
我明白了，但这个问题与 css 相关，而不是 Angular。所以我对预渲染的标记不感兴趣。我需要查看提到的课程。
@Chris 我更新了我的问题。

标签： css ionic-framework slide

【解决方案1】：

.slider{
  height:100vh;
  width:auto; 
}

.slider-slide {
  height: 100vh;
  width: auto;
}

【讨论】：

尝试解释更多
这仅在内容永远不会大于完整视口高度时才有效。在我的幻灯片中，有时我的内容只有在我向下滚动时才能访问。使用 100vh 会使此内容无法访问。

【解决方案2】：

这是一个 hacky 解决方案，但您可以创建一个 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>

【讨论】：

【解决方案3】：

我遇到了同样的问题，但没有找到任何好的解决方案。所以在尝试了一些事情之后，这是最有效的。

已编辑：

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

所以，这是最终对我最有效的方法。

在我的 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>

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

【讨论】：

【解决方案4】：

尝试在css下面添加：

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

为我工作:)

【讨论】：