Two rows, first row height = content, second row = fill remaining height?

I am trying to fill the entire page with an <ion-card> an a <div>. The card is above the div. So, let’s say the page height is 1000px. If the card height is 250px, then the div height should be 750px. If card is 200px, then div should be 800px. I think you should get what I mean.

How can achieve this?