javascript - 使用 openlayers map Bootstrap 列高度为 100 的内容

Question

我正在为我的应用程序使用 Bootstrap 设计功能。我的主要内容中有一个 openlayers map 。

<div class="container">
  <div class="row">
    <div class="well">
      Header
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="well">
        <h2>
            Sidebar
        </h2>
        <ul>
          <li>menu item 1</li>
          <li>menu item 2</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-8 fill">
      <div class="map" id="map"> </div>
    </div>
  </div>
</div>

javascript代码是这样的:

var map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
   view: new ol.View({
       center: [0, 0],
       zoom: 2
   })
})

Working demo is here

我想设置 map 高度以填充页面的列(<div class="col-sm-8 fill">)。但它并没有填充 100%。

Answer 1

如本 other answer 中所述，需要让 map 固定位置或者动态设置高度。

你也可以使用 100vh..

.map {height:100vh; width: 100%;}

http://codeply.com/go/wpuEToiHM4