Cordova/Ionic: Keep ion-slide/ion-card inside screen view

Question

I've been attempting for ages to find or work out a sound solution, but so far have not come up with anything solid. I'm essentially trying to design an ion-slide which contains an ion-card, which of course contains content of some sort, one of which is an ion-scroll without going past the bottom of the screen; this design must be dynamic and accommodate any screen size.

However, despite the length of the content inside the scroll, it will always go out of bounds of the screen view; thus requiring to scroll (ignoring the ion-scroll completely). Is there any dynamic approach to calculate where the bottom of the screen is, and to prevent any content from going past it, but enough space to prevent the pagers for the ion-slide-box overlapping the table. Below is a screenshot of what I have vs what I'm trying to achieve + code.

This is what I currently have if I do not define a height for the ion-scoll

This is the desired view I'd like across all slide, pagers at the bottom and the scroll finishes before the pagers start which needs to be dynamic so can change per screen size.

This is my code excluding any specified height requirements(which are fixed across all screen sizes which is NOT ideal).

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

Answer 1

You may want to try to use ionic content and footer inside - see http://ionicframework.com/docs/components/#footer

The content area in Ionic is the scrollable viewport of your app. While your headers and footers will be fixed to the top and bottom, respectively, the content area will fill the remaining available space. I assume this is what you are looking for