css - ブートストラップ内の Leaflet Map のサイジング

Question

リーフレット マップの高さをブートストラップ内のパーセンテージに変更しようとしましたが、毎回マップが描画されません。したがって、常に px 値に戻す必要があります。私はCSSの初心者なので、見逃している単純な設定だと確信しています。これが私のcssです。

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
    }
</style>

Answer 1

GithubのプロジェクトBootleafの CSS を使用:

html,body, #map{
    height:100%;
    width: 100%;
overflow: hidden;
}
body {
    padding-top: 50px;

Answer 2

body {
    padding: 0;
    margin: 0;
}
html, body, #map, .row-fluid{
    height: 100%;
}

#map {
    width: 100%;
}

.height-css
{
    height: 100%;
}

あなたのhtmlは

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12 height-css">
         <div id="map"></div> 
     </div>
   </div>
</div>