Warum würde meine Karte nur 50% anzeigen

Question

Ich habe eine Karte in Mapbox erstellt und auf meiner Website platziert. Aus irgendeinem Grund werden nur 50% der Karte auf meiner Website angezeigt.

Nach dem Lesen this question habe ich # map-container hinzugefügt, aber ich bekomme immer noch das gleiche Ergebnis.

MapBox Code:

<!--mapbox--> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' /> 
<!--end mapbox--> 

CSS:

#map-container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
#map { 
    height: 600px; 
} 

HTML-Code:

<div id="map-container"> 
    <div id="map"></div> 
</div> 

<script> 
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw'; 

    var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/yourstyle/cj5j5jl0c0bvb2rnamu85jjfp', 
    center: [29.184, -28.227], 
    pitch: 60, // pitch in degrees 
    bearing: -60, // bearing in degrees 
    zoom: 10 
    }); 
</script> 

Hier ist der Screenshot mein Problem:

Answer 1

html, 
body, 
#map { 
width:100%; 
height:100%, 
position:absolute; 
margin:0; 
z-index:1; 
} 

Ich denke, es notwendig ist, die Karte Höhe explizit angeben, wo in Ihrem Fall es 600px war. Verwenden Sie den obigen Code. Hinweis: als z-Index ist 1 irgendein z unter 1 wird versteckt werden

Answer 2

 <style>   
     #map { 
     height: 100%; 
     width:100%; 
     } 
     html, body { 
     height: 100%; 
     width:100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style>