我试图让更高的谷歌地图填满屏幕的整个高度(无论手机的大小)加上最底部的固定高度按钮。我使用Ionic 3
。
现在iPhone 5
它看起来很完美,在iPhone X
(更大的屏幕)上,地图太大了。 iPhone 6
正好在中间(不好)。
<ion-content no-bounce>
<div class="container">
<ion-list class="autocomplete-list">
<ion-item class="autocomplete-class" type="text" placeholder="Pick an address">{{this.geocoding.locationObject}}</ion-item>
</ion-list>
<div #map id="map"></div>
</div>
<div class="buttonContainerSafeArea">
<button (click)="next()" class="addLocationButton">Next</button>
</div>
</ion-content>
我的CSS是:
.container {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
background-color: black;
display: block;
widows: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
position: fixed;
top: 11%;
width: 100%;
height: 74.9%;
z-index: 99;
padding: 0;
margin: 0;
}
.addLocationButton {
position: absolute;
bottom: 0;
z-index : 999;
width: 100%;
height: 45px;
margin: 0;
text-align: center;
vertical-align: middle;
font-size: 15px;
font-family: $font-family-buttons;
font-weight: 500;
color: #ffffff;
background-color: $red-color;
opacity: 0.9;
}
.buttonContainerSafeArea {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
答案 0 :(得分:3)
您可以尝试使用此代码获取全高谷歌地图。
height : string;
constructor(public navCtrl: NavController,public alertCtrl:AlertController)
{
this.height = (document.documentElement.clientHeight-15)+"px";
}
<ion-content>
<div #map id="map" [style.width]="'100%'" [style.height]="height"></div>
<div class="buttonContainerSafeArea">
<button (click)="next()" class="addLocationButton">Next</button>
</div>
</ion-content>
从document.documentElement.clientHeight
你必须减去按钮高度。如果你在顶部添加更多元素,你也必须减去这些元素的高度。