Question

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

Answer 1

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

>>> import hashlib
>>> mysha1 = hashlib.sha1()
>>> mysha1.update("my_url")
>>> mysha1.hexdigest()
'ebde90b9f0c047ff9f86bec3b71afe5d00594030'
>>> mysha1.hexdigest()
'ebde90b9f0c047ff9f86bec3b71afe5d00594030'

然后你的html看起来像这样

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

Answer 2

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

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

Answer 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>

现在它尊重每张幻灯片的内容，只有当内容溢出时才能滚动视图。

Answer 4

尝试添加以下css：

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

为我工作：）

离子滑动盒中的100％高度不起作用

4 个答案: