離子滑塊不能正常工作的100％高度

我在我的應用中使用離子滑塊。有時，幻燈片內容的高度不會填滿整個內容。這意味着我在幻燈片的底部有一個空白區域。在這種情況下，用戶在滑動底部的空白區域時也應該能夠滑動。但是，這不起作用，因爲離子載玻片的尺寸不是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>

來源

2016-02-08 andreaspfr

添加到您的html請。 – Chris

我在你的html中看不到'.slider'和'.slider-slide' ... – Chris

@Chris：那是因爲角度指令可以在稍後用html替換。 –

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

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

來源

2016-02-08 17:58:05

試圖解釋一些更多 – davejal

只有當內容永遠不會大於完整的視口高度時才適用。在我的幻燈片中，我有時只有向下滾動時才能看到內容。使用100vh會使這個內容無法訪問。 – andreaspfr

這是一個哈克解決方案，但您可以創建自定義的CSS容器100vh只在你知道視圖使用將小於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>

來源

2016-06-20 03:10:55

我有同樣的問題，並沒有發現什麼好的解決問題的辦法。因此，嘗試了幾件事情後，這是最好的。

編輯：

我最後的答案是不是很好，因爲它有一個令人討厭的行爲。這將使所有的幻燈片具有相同的高度，因此即使沒有內容在其中某些內容中滾動時，也可以使它們全都可滾動。

所以，這是最終對我最好的工作。

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

現在它尊重每張幻燈片的製作滾動視圖僅當有溢出內容的內容。

來源

2016-07-08 21:40:55

嘗試增加以下CSS：

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

爲我工作:)

來源

2017-11-27 10:30:59 CodeGems

離子滑塊不能正常工作的100％高度

回答

相關問題