Question

我正在为我的应用程序使用bootstrap设计功能。我的主要功能中有一张openlayers地图。

<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

我想设置地图高度以填充页面的列（<div class="col-sm-8 fill">）。但它不会100％填满。

Answer 1

如此other answer中所述，您需要使地图固定位置或动态设置高度。

你也可以使用100vh ..

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

http://codeply.com/go/wpuEToiHM4

Answer 2

sofar我理解你的问题，我只是在我的CSS中填写一个类.fill。并将高度设置为100％

.map {

身高：100％;

}

bootstrap列高度为100的内容与openlayers映射

2 个答案: