ionic app cannot fully scroll down when ion-scroll height is too high

Question

I encountered this strange problem with an ionic app. The ionic app cannot fully scroll down. For example, I may have a table with 100 rows. I can at most scroll down to the 80th row. Here is the relevant html code.

<ion-content>
    <ion-scroll zooming="true" direction="xy" style="height:700px">
      <table ng-table="tableParams" style="width:600px">
        <!-- table contents -->
      </table>
    </ion-scroll>
</ion-content>

I later discovered the solution but I do not know why it works. The solution is to lower the height from 700px to 500px. <ion-scroll zooming="true" direction="xy" style="height:500px">

I have no idea why it works. Can someone explain?

EDIT: One of the answers mentioned that the problem was that height was specified in absolute terms. How can I specify the height such that it can work on mobile devices of different heights?

Answer 1

You are using absolute pixel heights for your containers. If the device is not at least 700 pixels high you will cut off the bottom of the scroll container.