ionic-framework - Mapbox 地图未填充离子含量全屏

Question

我正在尝试使我的标题透明

<ion-header no-border>
  <ion-toolbar >
    <ion-buttons slot="start">
      <ion-menu-button color="primary"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen>
   <div id="map"></div>
</ion-content>

并在 .scss

ion-content{
  --ion-background-color: transparent;
}

ion-toolbar {
  --background: transparent;
  --color: white;
}

#map { 
  height: 100%;
  width: 100%;  
}

但是 id="map" 的 div 仍然没有全屏显示，无论如何我总是得到这个

我该如何解决这个问题？

标签： ionic-frameworkmapbox-gl

Answer 1

html.文件

<ion-header>
  <ion-toolbar color="transparent">
    <ion-buttons slot="start">
      <ion-menu-button color="light"></ion-menu-button>
    </ion-buttons>
    <ion-title color="light" text-center>Sign In</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
</ion-content>

css.文件

ion-content{
   padding: 0px;
}