11

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

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

web-mapping leaflet bootstrap-framework

— njackson.gis
ソース

3

詳細を入力してください：マークアップはどのように見えますか？問題を示す最小限の例を作成できますか？

— atlefren 2013年

12

マップの幅が100％の高さになるように変更されると上部のマージンが異なる可能性があるため（ただし、上部にナビゲーションバーがあるため）、ブートストラップのマップの高さに常に問題がありました。

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

これは醜いですが、仕事を成し遂げます。

— カルバン
ソース

6

【2020年更新】

2020/02/23現在、Flexboxは95％のブラウザーサポートを備えており、Flex-Grow プロパティを使用してLeafletを応答可能にするための優れたオプションです。

ここでCodePenのデモを見る

Flexboxをサポートしていないブラウザーでも、ユーザーが少しスクロールするだけでレンダリングされるように設定されています

¯\ _（ツ）_ /¯

================================================== ==========

[古い投稿]

これでうまくいきました。

注：大画面で地図を100％の幅にしたくないので、追加しました

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}

— トリスタンフォワード
ソース

1

私のために働いた。実際にはまったく最良の答え

— g07kore

5

問題は#mapの子でbodyあり、親が明示的に定義された高さを持っている場合にのみ、子要素の高さのパーセントを指定できます。

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

これはあなたが望むものを作成しますが、使用可能な領域は480pxの75％を超えて大きくなることは決してありません。通常、divコンテンツがない場合は折りたたみますが、Leaflet divを使用すると、マップが含まれていても、レンダリング時に計算されないため、レンダリング時に折りたたまれます。コンテンツがすべての垂直方向のスペースを占めるようにする場合は、JavaScriptを使用してページの読み込み時にウィンドウサイズをクエリし、高さをそのように設定できます。

— RomaH
ソース

3

とタグにa height:100%を追加するだけで、高さが定義され、参照として使用できるようになり、機能するはずです。htmlbody

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

参照：

Stackoverflow：Percentage Height HTML 5 / CSSのこの関連質問
また、W3C CSS 2.1標準を見て、ボックスモデルと、高さとマージンの計算に関する部分を確認することもできます。

— pconcepcion
ソース

1

これが進むべき道です。

— George Silva

1

警告！クロスブラウザテストを行った後、以下の私の答えは私にとってはChromeでのみ機能し、Firefoxでは機能しないことがわかりました

おかげで、各div要素のメインのdivと表示テーブルセルにテーブルを：私は同じ問題を抱えていたし、ディスプレイでこれを固定stackoverflowの上でこの答えを。

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

そしてCSS：

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

— RvdBerg
ソース

ブートストラップ内のリーフレットマップのサイズ変更

参照：