100% height in ion-slide-box not working

Question

I'm using the ion-slide-box in my application. Sometimes the height of the content for a slide is not filling the whole content. This means I have a blank space at the bottom of the slide. In this scenario the user should also be able to slide when he swipes also the blank space at the bottom. However, this is not working since the size of the ion-slide is not 100%. I'm also not able to set the size to 100%. I already tried the following:

.slider{
  height:100%;
}

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

Using the above code the slide content is still not 100%. Thank you for your help. This is the html for the slide-box:

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

Solution 1

This is a hacky solution, but you can create a custom css container with 100vh to use only on views you know will be less than 100vh.

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

Then your html can look like this

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

Solution 2

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

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

Comments

[davejal]

try to explain some more

[andreaspfr]

This works only if the content is never bigger than the full viewport height. In my slide I have sometimes content which is only reachable when I scroll down. Using 100vh would make this content unreachable.