なぜ私の地図は50％しか表示されませんか

Question

mapboxでマップを作成し、それを自分のサイトに配置しました。何らかの理由で地図の50％しか私のサイトに表示されません。

this questionを読み取った後、＃map-containerを追加しましたが、同じ結果が得られます。

Mapboxコード：

<!--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コード：

<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> 

ここではスクリーンショットです私の問題で：

Answer 1

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

私はあなたのケースで、それは600PXあった場所明示的にマップの高さを指定する必要があると思います。上記のコードを試してみてください。 注：zインデックスが1の場合、1より下の任意のzは非表示になります

Answer 2

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