イオンアプリケーションのUIの問題

Question

私は実際に何が起こっているのか分かりませんが、ユーザー入力フィールドがアクティブなときに、画面上のロゴやその他のコンテンツが消えます。これはページのscssファイルと関係がありますか？助けてください。

これは、ページのSCCSファイルです：SCCSファイルは、ロゴのサイズを変更するには十分である場合、私はわからなかった

<ion-header> 

    <ion-navbar> 
    <ion-title>Login</ion-title> 
    </ion-navbar> 

</ion-header> 

<ion-content padding class="page-main"> 
    <img src="assets/img/logo.png" class="image"/> 
    <ion-item> 
    <ion-label color="primary" floating>Email</ion-label> 
    <ion-input type="email" [(ngModel)]=user.email></ion-input> 
    </ion-item> 
    <ion-item> 
     <ion-label color="primary" floating>Password</ion-label> 
     <ion-input type="password" [(ngModel)]=user.password></ion-input> 
    </ion-item> 
    <button class="login" (click)="login(user)" ion-button round medium icon-end color="primary"> 
     {{ loginMsg }} 
     <ion-icon name="arrow-forward"></ion-icon> 
    </button> 
    <button class="register" (click)="reg()" ion-button item-end clear medium color="primary"> 
     {{ regMsg }} 
    </button> 
    <button class="fgtpwd" (click)="forgtpwd()" ion-button clear medium color="primary"> 
     {{ fgtpwd }} 
    </button> 
</ion-content> 

と：これは、htmlファイルである

.page-main { 

.image { 
    display:block; 
    height: 40%; 
    width: auto; 
    margin-left:auto; 
    margin-right:auto; 
} 

.login { 
    display: block; 
    width: auto; 
    height: 8%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
} 

.register { 
    display: block; 
    width: auto; 
    height: 8%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
} 

.fgtpwd { 
    display: block; 
    width: auto; 
    height: 8%; 
    margin-left: auto; 
    margin-right: auto; 
} 

} 

画面サイズと解像度に基づいたコンテンツ。

ありがとうございます！

Answer 1

min-heightをページのコンテンツに合わせて設定する必要があります。

.page-main{ 
    min-height: 100%; 
}