высота содержания ионов на 100% больше экрана

Мне нужно создать одну страницу с вертикальным откликом, она должна быть полноэкранной и без прокрутки.

Я пробовал делать

ion-content: {
  height: 100%;
}

и многие другие возможные решения, но ничего не работает.

Я обнаружил, что в небольших устройствах, таких как iPhone SE, высота содержания ионов больше, чем экран устройства, или содержание ионов ниже вкладок ионов.

Это моя проблема (iPhone SE)

Вот как я хочу, чтобы он выглядел (iPhone X)

Вот содержание ионов:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <p *ngIf="![null, undefined, 'null', 'undefined'].includes(user_type)" class="user-type">{{user_type_text}}</p>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12">
        <ion-icon name="person-circle" class="avatar"></ion-icon>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12">
        <p>{{user_name}}</p>
      </ion-col>
    </ion-row>
    
    <ion-row class="work-status">
      <ion-col size="4">
        <p class="work-status-label">Pending</p>
        <p class="work-status-value" [style.color]="color_theme">{{pending}}</p>
      </ion-col>
      <ion-col size="4">
        <p class="work-status-label">In Progress</p>
        <p class="work-status-value" [style.color]="color_theme">{{progress}}</p>
      </ion-col>
      <ion-col size="4">
        <p class="work-status-label">Completed</p>
        <p class="work-status-value" [style.color]="color_theme">{{completed}}</p>
      </ion-col>
    </ion-row>
    
    <ion-row>
      <ion-col size="6">
        <ion-card (click)="profile()">
          <ion-icon name="person-circle" class="btn-icon" [style.color]="color_theme"></ion-icon>
          <p class="btn-text">My Profile</p>
        </ion-card>
      </ion-col>
      <ion-col size="6">
        <ion-card (click)="notifications()">
          <ion-icon name="notifications" class="btn-icon" [style.color]="color_theme"></ion-icon>
          <p class="btn-text">Notifications</p>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="6">
        <ion-card (click)="requests()">
          <ion-icon [name]="request_button_icon" class="btn-icon" [style.color]="color_theme"></ion-icon>
          <p class="btn-text">{{request_button_text}}</p>
        </ion-card>
      </ion-col>
      <ion-col size="6">
        <ion-card (click)="explore()">
          <ion-icon name="search" class="btn-icon" [style.color]="color_theme"></ion-icon>
          <p class="btn-text">{{explore_button_text}}</p>
        </ion-card>
      </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>

Вот scss:

ion-grid {
  height: 100%;
}

ion-content {
  height: 100%;
}

p {
  text-align: center;
}

.user-type {
  margin: 0;
}

.avatar {
  font-size: 500%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.work-status{
  -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
}

.work-status-value {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 250%;
}

.work-status-label {
  margin-bottom: 0;
  margin-top: 0;
}

.btn-text {
  font-size: 150%;
  margin-top: 0;
  margin-left: 2%;
  margin-right: 2%;
}

.btn-icon {
  font-size: 300%;
}
Источник

2 ответа

Решение

Добавьте это в свой CSS:

ion-card{
  margin-bottom: 10px;
  margin-top: 10px;
}
Источник

<ion-content [scrollY]="false" class="flex-card">

Пришлось еще немного повозиться, чтобы все заработало правильно. Это определенно поставило меня на правильный путь. (флекс-карта моя, она заставляет средний бит работать так, как я хочу...)

Источник
Другие вопросы по тегам