Top spacing without using a header and toolbar, Ionic 4

[wilprim]

I am playing around with Ionic and am trying to figure out how to build a UI that doesn’t include a header and toolbar. When I try to do this, however, all my content doesn’t get padded down below status bar (and notch for iPhone x) Is there a way to do this? I have thought about adding a padding-top to the and then changing that padding using the Platform utility but I want to first see if there is something easier I may be missing.

Here is my code for the content:

<ion-content>
    
    <ion-list lines='full'>
      <ion-list-header>
        Todos
      </ion-list-header>
      <ion-item-sliding *ngFor="let todo of todos">
        <ion-item-options>
          <ion-item-option side="end">
            Delete
          </ion-item-option>
        </ion-item-options>
        <ion-item>
          <ion-label>
            {{ todo.data.title }} 
          </ion-label>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
    <ion-infinite-scroll threshold="0" (ionInfinite)="loadData($event)">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>

Here is a screenshot of iphone 8 and X (pardon my drawing for the notch ;))