[英]ion-content height 100% bigger than screen
我需要構建一個垂直響應的頁面,它需要全屏且無滾動。
我試過做
ion-content: {
height: 100%;
}
和許多其他可能的解決方案,但似乎沒有任何效果。
我發現在像 iPhone SE 這樣的小型設備中,離子含量的高度大於設備的屏幕,或者離子含量低於離子標簽。
這是離子含量:
<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>
這是 scs:
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%;
}
在你的 CSS 中添加這個:
ion-card{
margin-bottom: 10px;
margin-top: 10px;
}
<ion-content [scrollY]="false" class="flex-card">
我仍然需要多花點時間才能使其正常工作。 這絕對讓我走上了正確的軌道。 (彈性卡是我的,它讓中間位按照我想要的方式工作......)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.