我试图让更高的谷歌地图填满屏幕的整个高度(无论手机的大小)加上最底部的固定高度按钮。我正在使用 Ionic 3
。
现在在 iPhone 5
上它看起来很完美,而在 iPhone X
(更大的屏幕)上 map 太大了。 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);
}
最佳答案
您可以尝试使用此代码获取全高谷歌地图。
ts
height : string;
constructor(public navCtrl: NavController,public alertCtrl:AlertController)
{
this.height = (document.documentElement.clientHeight-15)+"px";
}
html
<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
开始,您必须减去按钮高度。如果您在顶部添加更多元素,您还必须减去这些元素的高度。
关于css - Ionic 3 谷歌地图高度与屏幕尺寸成比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47984695/