[Unsolved] Autosize grid fullscreen

Ionic Framework ionic-v3
1

Hi,
for my latest app I got this screen:

.html:

<ion-header>
//code
</ion-header>


<ion-content padding no-bounce>
	<ion-grid class="grid-full">
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
		<ion-row>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
			<ion-col>
				<button ion-button>caption</button>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-content>


<ion-footer>
//code
</ion-footer>

css:

page-central {

.grid-full ion-row {
	margin-top: 0px;
  height: 100%;
  padding: 0px;
  flex-wrap: wrap;
}

.grid-full ion-col {
  flex: 50%;
  max-width: 50%;
  padding: 0px 5px;
  font-size: 10px;
}
}

So on my phone, the content is exactly filling the whole screen between header and footer and, most importantly, there is no option to scroll. But on another phone it either does not fill the entire screen or it is to much so you have to scroll.
Is there a option to auto-size the content (grid and/ or buttons) so it fits perfect between footer and header??

Greetings,
Robert

2

hey did find the solution for this ?