【发布时间】：2016-08-24 16:23:32
【问题描述】：
多年来，我一直在尝试寻找或制定一个合理的解决方案，但到目前为止还没有提出任何可靠的解决方案。我本质上是在尝试设计一个包含离子卡的离子幻灯片，其中当然包含某种内容，其中一个是离子滚动而不会越过屏幕底部；这种设计必须是动态的，并且可以适应任何屏幕尺寸。
然而，尽管滚动中的内容很长，但它总是会超出屏幕视图的范围；因此需要滚动（完全忽略离子滚动）。是否有任何动态方法来计算屏幕底部的位置，并防止任何内容通过它，但有足够的空间来防止 ion-slide-box 的寻呼机与表格重叠。下面是我所拥有的与我正在尝试实现的 + 代码的屏幕截图。
如果我没有为 ion-scoll 定义高度，这就是我目前所拥有的
这是我想要的所有幻灯片的理想视图，底部的寻呼机和滚动在寻呼机开始之前完成，这需要是动态的，因此可以根据屏幕大小进行更改。
这是我的代码，不包括任何指定的高度要求（在所有屏幕尺寸上都是固定的，这并不理想）。
<ion-slide-box on-slide-changed="slideHasChanged($index)" style="margin-top: -15px; height: 100%;">
<ion-slide>
<div class="list card">
<div class="item item-divider title item-toggle">
Sales {{ SalesDate }}
<label class="toggle toggle-calm" style="margin: -13px;">
<input type="checkbox" ng-click="swap(SalesDate, '')">
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
<div class="item item-text-wrap">
<p ng-if="data.chartData.sales.length == 0">No data!</p>
<canvas id="pie"
class="chart chart-pie"
chart-data="data.chartData.sales"
chart-labels="data.dept"
chart-options="data.chartOptions"
chart-colours="data.chartData.hex"></canvas>
</div>
<table class="table table-striped">
<thead>
<tr>
<th><b>#</b></th>
<th style="text-align: right;"><b>Sales</b></th>
</tr>
</thead>
</table>
<ion-scroll ng-if="SalesDate == '(Week)'">
<table class="table table-striped">
<tbody>
<tr ng-repeat="(key, value) in data.sales">
<td><i class="fa fa-square" style="color: {{ value.hex }}"></i> {{ key }}</td>
<td style="text-align: right;">{{ value.saleAmount | currency: "£" }}</td>
</tr>
</tbody>
</table>
</ion-scroll>
<ion-scroll ng-if="SalesDate == '(Today)'">
<table class="table table-striped">
<tbody>
<tr ng-repeat="(key, value) in data.sales">
<td><i class="fa fa-square" style="color: {{ value.today.hex }}"></i> {{ key }}</td>
<td style="text-align: right;">{{ value.today.saleAmount | currency: "£" }}</td>
</tr>
</tbody>
</table>
</ion-scroll>
</div>
</ion-slide>
</ion-slide-box>
【问题讨论】：
标签： html css angularjs cordova ionic-framework