How to create a Page with a Header, Footer, and a Proportionately Sizing Body?

I'm trying to do the following:

1. Create a page with a header and a footer, and then the body which sizes proportionately to the device.

In this example, the goal is to make the up arrow and down arrow size proportionately between different screen sizes.

I have come up with a StackLayout that contains the Header in StackLayout, a footer (copied from the header for this example) inside it's own StackLayout, and the body as a RelativeLayout with something inside of that, however I can't figure out what the type of layout should be in the relativelayout. The relativelayout will be used to keep things proportional between different screen sizes, and will also be used to animate from different body views using the technique mentioned here: krystin.codes/animating-a-stacklayout-in-xamarin-forms/

I've put the following code example together but the images are not proportionately sizing correctly. I've changed the backgroundcolor of the objects for easy viewing of the location of the layouts.

Any help would be appreciated.

See attached for 4s vs 6 plus sizing differences that are currently incorrect from the example code in my reply. I'd like the up and down images to be proportionate (take up the same amount of space on the display of each device (spacing between the header and the footer should stay the same).

Thanks,

John