When keyboard up div height changing

I have this form.

When i click the input the div size changing, like half of height .

My html here.

<ion-content padding>

  <form #imageForm="ngForm" style="height: 100%">

    <div class="img-container">
      <button ion-button small (click)="selectImage()" *ngIf="!imgUrl">Yüklenecek fotoğrafı seçin</button>
      <ion-row style="max-height: 100%; max-width: 100%">
        <img src={{imgUrl}}>

    <input hidden [(ngModel)]="imgUrl" required name="image">

    <ion-item style="width:95%">
      <ion-label stacked color="primary" style=font-size: large">Açıklama</ion-label>
      <ion-input type="text" [(ngModel)]="title" required name="title" placeholder="..."></ion-input>

    <ion-item no-lines>
      <ion-row class="action-sheets-basic-page">
          <button ion-button (click)="selectImage()" style="width: 100%" [disabled]="!imgUrl">Yeniden Seç...</button>

          <button [disabled]="!imageForm.form.valid" type="submit" ion-button (click)="upload()" color="danger"
                  style="width: 100%">Gönder

And my scss

page-new-post {
    padding-bottom: 0 !important;

.img-container {
  border: 2px dashed #d7d7d7;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;

.img-container img {

  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;

If i remove form height(100%) and giving 300px height to img-container it works well but how can i give the percentage.
Can somenone help me , thanks already…

1 Like

Can someone help me about this issue