离子列表在底部被切断

Question

我正在显示获取数据的正常列表视图，但底部被截断。

在我的CSS中，我有：]

.scroll { 
    height: 100% 
}

我的HTML是：

 <ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
 <ion-item ng-repeat="category in categories | orderBy: 'id':true"
       href="#/category/{{category.id}}"
       class="item item-thumbnail-left catthumb list cat">
        <img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
        <span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-list>
</ion-content>

这是图片：

Answer 1

你错过了关闭的离子项标签。它应该是：

<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
 <ion-item ng-repeat="category in categories | orderBy: 'id':true"
   href="#/category/{{category.id}}"
   class="item item-thumbnail-left catthumb list cat">
    <img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
        <span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
  </ion-item>
</ion-list>
</ion-content>

Answer 2

当我们添加另一个视图级别页眉或页脚时会发生这种情况。

简单的解决方案是在ur页面的末尾添加spacer div和ur page level header的高度。 For more info