Мой скролл-контент очень маленький, почему?

Question

Когда я открываю новую форму в моем проекте, у меня вверху есть фиксированный контент, который был нормальным, но мой прокручиваемый контент его очень маленький, и я не знаю почему:

Я вижу первую строку моей формы

Я добавляю свой HTML-код:

<ion-header>


<ion-header>
  <ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
     <ion-title>{{ pageTitle }}</ion-title>
  </ion-navbar>
</ion-header>


<ion-content has-tabs="true" padding="true">

  <div>
     <ion-item *ngIf="isEdited && !hideForm">
        <button
           ion-button
           item-right
           color="secondary"
           text-center
           block
           (click)="deleteEntry()">Supprimer ce cheval ?</button>
     </ion-item>


     <div *ngIf="hideForm">
        <ion-item class="post-entry-message" text-wrap>
           <h2>Bravo !</h2>
           <p>Peut-être que vous désirer éditer ou ajouter un nouveau cheval ?</p>
           <p>Retournez tout simplement au menu et séléctionner votre option</p>
        </ion-item>
     </div>


     <div *ngIf="!hideForm">
        <form [formGroup]="form" (ngSubmit)="saveEntry()">
           <ion-list>

              <ion-item-group>
                 <ion-item-divider color="light">Id du cheval *</ion-item-divider>
                 <ion-item>
                    <ion-input
                       type="text"
                       placeholder="Entrer un id"
                       formControlName="id"
                       [(ngModel)]="id"></ion-input>
                 </ion-item>
              </ion-item-group>

               [...]

              <ion-item>
                 <button
                    ion-button
                    color="primary"
                    text-center
                    block
                    [disabled]="!form.valid">Valider</button>
              </ion-item>


           </ion-list>
        </form>
     </div>
  </div>


</ion-content>

Я пытаюсь изменить значение overtflow-x и overflow-у, но: - это слишком мало, как на картинке или - мы не можем прокрутить внизу страницы

Answer 1

Добавьте следующий код CSS в ваш код

.scroll-content {
    height: calc(100% - 56px);
}

Это абсолютная позиция div.Высота не будет приниматься до тех пор, пока вы конкретно не примените к ней высоту или не добавите в нее данные.